-
+ {analysis.objects.map((o, i) => (
+
-
+ ++
+ ++++ {o.romanized ?+ {o.romanized}: null} +{o.label}++ {Math.round(o.score * 100)}% ++
+ ))}
+
No objects detected. Try a clearer photo.
+ )} +-
+ {analysis.sentences.map((s, i) => (
+
-
+ ++ {s.romanized ?++
+ + {s.romanized}: null} +{s.gloss}+
+ ))}
+
No sentences generated. Retry the photo.
+ )} ++ + {title} +
+ {children} +
+
+
+ inputRef.current?.click()} />}
+
+ {previewUrl && imageSize && (
+
+
+ ) : null}
+
+ {analysis ?
+ );
+}
diff --git a/app/(app)/camera/PhotoMarkers.tsx b/app/(app)/camera/PhotoMarkers.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6c0dfeeacbc3dec6ba23fafe0a97fc4906858903
--- /dev/null
+++ b/app/(app)/camera/PhotoMarkers.tsx
@@ -0,0 +1,82 @@
+"use client";
+
+import { useState } from "react";
+import type { FuriSegment } from "@/lib/types/dialogue";
+import { Furi } from "@/components/Furi";
+
+type MarkerObject = {
+ label: string;
+ translation: string;
+ translationSegments?: FuriSegment[];
+ romanized?: string;
+ box: [number, number, number, number];
+};
+
+export function PhotoMarkers({
+ objects,
+ imageSize,
+}: {
+ objects: MarkerObject[];
+ imageSize: { w: number; h: number };
+}) {
+ const [selected, setSelected] = useState
+ Sentences match level
+
+
+ {!previewUrl &&
+
+ )}
+
+ {error ? (
+
+
+
+
+
+
+
+
+ {analysis?.caption ? (
+
+ 
+
+ {analysis ?
+
+
+ )}
+
+ “{analysis.caption}”
+
+ ) : null}
+
+
+ Analysis failed
+{error}
+
+
+
+
+ Drop anything to upload
++ Camera or gallery images automatically become interactive vocabulary cards. +
+
+
+
+
+
+
+ Image practice
+
+
+ + Learn from a photo +
++ Capture objects around you and turn them into vocabulary. +
+Something went wrong
+{error.message || "Please try again."}
+ +
+
+
+
+
+
+ {children}
+
+
+
+
+ );
+}
diff --git a/app/(app)/phrases/PhraseResult/EmptyState.tsx b/app/(app)/phrases/PhraseResult/EmptyState.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0ce3a03ddd1ae378de36b9743eec3af11d4d960e
--- /dev/null
+++ b/app/(app)/phrases/PhraseResult/EmptyState.tsx
@@ -0,0 +1,35 @@
+import { PenLine } from "lucide-react";
+
+export function EmptyState({ isPending = false }: { isPending?: boolean }) {
+ return (
+
+
+ );
+}
diff --git a/app/(app)/phrases/PhraseResult/HeaderCard.tsx b/app/(app)/phrases/PhraseResult/HeaderCard.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..aa4d687f7d04d17f4ec79ac4f3cf4d70b1ce917c
--- /dev/null
+++ b/app/(app)/phrases/PhraseResult/HeaderCard.tsx
@@ -0,0 +1,33 @@
+import type { FuriSegment } from "@/lib/types/dialogue";
+import { Furi } from "@/components/Furi";
+import { TTSButton } from "@/components/TTSButton";
+
+export function HeaderCard({
+ input,
+ inputSegments,
+ partOfSpeech,
+ translation,
+ lang,
+}: {
+ input: string;
+ inputSegments?: FuriSegment[];
+ partOfSpeech: string;
+ translation: string;
+ lang: string;
+}) {
+ return (
+
+
+ {isPending ? (
+
+
+ ) : (
+
+ Building your mini lesson...
+
+
+
+
+ + Enter a phrase to build a mini lesson +
+ )} + +
+
+ );
+}
diff --git a/app/(app)/phrases/PhraseResult/KanjiCard.tsx b/app/(app)/phrases/PhraseResult/KanjiCard.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d87ce19f306c72b47e120ccbf6adb96e04f10dd4
--- /dev/null
+++ b/app/(app)/phrases/PhraseResult/KanjiCard.tsx
@@ -0,0 +1,39 @@
+import type { KanjiInfo } from "@/lib/hf/phrases";
+import { Furi } from "@/components/Furi";
+
+export function KanjiCard({ kanji }: { kanji: KanjiInfo }) {
+ return (
+ {partOfSpeech}
+
+
+
+
+
+
+ {translation}
+
+
+ );
+}
diff --git a/app/(app)/phrases/PhraseResult/RelatedWordCard.tsx b/app/(app)/phrases/PhraseResult/RelatedWordCard.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..03bea77f675156f3266bb0fdbd85239e41a5d69b
--- /dev/null
+++ b/app/(app)/phrases/PhraseResult/RelatedWordCard.tsx
@@ -0,0 +1,25 @@
+import type { RelatedWord } from "@/lib/hf/phrases";
+import { Furi } from "@/components/Furi";
+import { TTSButton } from "@/components/TTSButton";
+
+export function RelatedWordCard({ word, lang }: { word: RelatedWord; lang: string }) {
+ return (
+
+
+ {kanji.kanji}
+ {kanji.meaning}
+ -
+
- On +
- + {kanji.onyomi.length ? kanji.onyomi.join("、") : —} + +
- Kun +
- + {kanji.kunyomi.length ? kanji.kunyomi.join("、") : —} + +
+
+
+
+
+
+ ) : null}
+
+
+ );
+}
diff --git a/app/(app)/phrases/PhraseResult/Section.tsx b/app/(app)/phrases/PhraseResult/Section.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0638a3b3d94b8bc2cfdc025363b5ed59a662de35
--- /dev/null
+++ b/app/(app)/phrases/PhraseResult/Section.tsx
@@ -0,0 +1,19 @@
+export function Section({
+ title,
+ icon,
+ children,
+}: {
+ title: string;
+ icon: React.ReactNode;
+ children: React.ReactNode;
+}) {
+ return (
+
+
+
+
+
+ {word.partOfSpeech ? (
+
+ {word.partOfSpeech}
+
+ ) : null}
+
+ {word.translation}
+ {word.note ? {word.note}
: null} +
+ {icon}
+
+ {children}
+ {title}
+
+
+ );
+}
diff --git a/app/(app)/phrases/PhraseResult/index.tsx b/app/(app)/phrases/PhraseResult/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9d80d08649b8c6667f851fca6b5db56b67b6359c
--- /dev/null
+++ b/app/(app)/phrases/PhraseResult/index.tsx
@@ -0,0 +1,78 @@
+import { BookOpen, Languages, Lightbulb, ListChecks, MessageSquareText } from "lucide-react";
+import type { PhraseAnalysis } from "@/lib/hf/phrases";
+import { Section } from "./Section";
+import { HeaderCard } from "./HeaderCard";
+import { SentenceCard } from "./SentenceCard";
+import { KanjiCard } from "./KanjiCard";
+import { RelatedWordCard } from "./RelatedWordCard";
+
+export function PhraseResult({ result, lang }: { result: PhraseAnalysis; lang: string }) {
+ return (
+
+
+
+
+ {sentence.translation}
+ {sentence.note ? (
+ {sentence.note}
+ ) : null}
+
+
+ );
+}
diff --git a/app/(app)/phrases/PhrasesClient.tsx b/app/(app)/phrases/PhrasesClient.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8b99b0a767db1017bfee282afc45f9141dd14eea
--- /dev/null
+++ b/app/(app)/phrases/PhrasesClient.tsx
@@ -0,0 +1,100 @@
+"use client";
+
+import { useState } from "react";
+import type { PhraseAnalysis } from "@/lib/hf/phrases";
+import type { Level } from "@/lib/languages";
+import { LevelPicker } from "@/components/LevelPicker";
+import { PhraseResult } from "./PhraseResult";
+import { EmptyState } from "./PhraseResult/EmptyState";
+
+const examples = ["Car", "Dog", "Teacher", "finding lost documents"];
+
+export function PhrasesClient({ defaultLevel, lang }: { defaultLevel: Level; lang: string }) {
+ const [text, setText] = useState("");
+ const [result, setResult] = useState
+ {result.sentences.map((sentence, index) => (
+
+
+
+ {result.kanjiInfo.length > 0 ? (
+ }>
+
+ {result.kanjiInfo.map((kanji, index) => (
+
+
+ ) : null}
+
+ {result.relatedWords.length > 0 ? (
+ }>
+
+ {result.relatedWords.map((word, index) => (
+
+
+ ) : null}
+
+
+ }>
+
+
+ {result.breakdown.map((item, index) => (
+
+
+
+ }>
+ {result.verbInfo ? (
+
+
+ ))}
+ {item.part}
+ {item.explanation}
+
+
+ ) : null}
+ Verb info
+ {result.verbInfo}
+-
+ {result.tips.map((tip, index) => (
+
- + {tip} + + ))} +
+
+ );
+}
diff --git a/app/(app)/phrases/page.tsx b/app/(app)/phrases/page.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6f12ae30cadb982b3d30c69e1af0e6d989928fa3
--- /dev/null
+++ b/app/(app)/phrases/page.tsx
@@ -0,0 +1,36 @@
+import { getSession } from "@/lib/auth/session";
+import { languageName, type Level } from "@/lib/languages";
+import { PhrasesClient } from "./PhrasesClient";
+import { LanguageSwitcher } from "@/components/LanguageSwitcher";
+
+export default async function PhrasesPage() {
+ const session = (await getSession())!;
+ const targetLangs = session.targetLangs ?? (session.targetLang ? [session.targetLang] : []);
+
+ return (
+
+
+
+ {isPending ?
+
+
+
+ setText(event.target.value)}
+ onKeyDown={(event) => event.key === "Enter" && analyze()}
+ placeholder="Type a phrase, word, or verb..."
+ className="h-20 w-full sm:flex-1 rounded-2xl border-4 border-black bg-white px-8 text-2xl font-black text-black outline-none transition-all focus:translate-x-[-2px] focus:translate-y-[-2px] focus:shadow-[6px_6px_0px_rgba(0,0,0,1)] placeholder:text-xl placeholder:font-bold placeholder:text-gray-400 shadow-[4px_4px_0px_rgba(0,0,0,1)]"
+ />
+
+
+ {!text && (
+
+ {examples.map((example) => (
+
+ ))}
+
+ )}
+ {error ? (
+
+ {error}
+
+ ) : null}
+
+
+
+
+
+
+ Phrase coach
+
+
+ + Break down phrases +
++ Master {languageName(session.targetLang!)} with deep grammar insights, accurate translations, and contextual usage tips. +
+
+
+
+
+
+
+
+