1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
"use client";
import React, { useEffect, useState } from "react";
import { motion } from "framer-motion";
import FullText from "./FullText";
import "./zoom.css";
import { useZoom, ZoomProvider } from "./hooks/useZoom";
import { NLP } from "sortug-ai";
import { Loader2 } from "lucide-react";
const App: React.FC = () => {
const { viewState } = useZoom();
const [isLoading, setLoading] = useState(true);
const [spacy, setSpacy] = useState<NLP.Spacy.SpacyRes>();
const [stanza, setStanza] = useState<NLP.Stanza.StanzaRes>();
useEffect(() => {
const sp = sessionStorage.getItem("spacyres");
const st = sessionStorage.getItem("stanzares");
if (sp) setSpacy(JSON.parse(sp));
if (st) setStanza(JSON.parse(st));
setLoading(false);
}, []);
console.log(viewState.level, "level");
return (
<>
<motion.header
className="app-header"
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.2, duration: 0.5 }}
>
<p className="instructions">
Click on any text element to zoom in, exploring language from:
<br />
<span>
<span className={viewState.level === "text" ? "highlight" : ""}>
Text
</span>
<span>→</span>
<span
className={viewState.level === "paragraph" ? "highlight" : ""}
>
Paragraph
</span>
<span>→</span>
<span className={viewState.level === "sentence" ? "highlight" : ""}>
Sentence
</span>
<span>→</span>
<span className={viewState.level === "clause" ? "highlight" : ""}>
Clause
</span>
<span>→</span>
<span className={viewState.level === "word" ? "highlight" : ""}>
Word
</span>
<span>→</span>
<span className={viewState.level === "syllable" ? "highlight" : ""}>
Syllable
</span>
<span>→</span>
<span className={viewState.level === "phoneme" ? "highlight" : ""}>
Phoneme
</span>
</span>
<br />
Click the Back button or on empty space to return to the previous
level.
</p>
</motion.header>
<main>
{isLoading ? (
<Loader2 />
) : spacy ? (
<FullText text={spacy.input} doc={spacy} stanza={stanza} />
) : (
<p>Oops</p>
)}
</main>
<motion.footer
className="app-footer"
initial={{ opacity: 0 }}
animate={{ opacity: 0.7 }}
transition={{ delay: 1.5 }}
>
<p>A language learning tool with seamless zoom animations</p>
</motion.footer>
</>
);
};
export default function () {
return (
<ZoomProvider>
<App />
</ZoomProvider>
);
}
|
