@yudin-s/react-chrome-ai 0.1.0

package/examples/local-review-workbench/src/styles.css

@@ -0,0 +1,190 @@
+:root {
+  background: #f5f7fa;
+  color: #182230;
+  font-family:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}
+
+button,
+textarea {
+  font: inherit;
+}
+
+button {
+  min-height: 38px;
+  border: 0;
+  border-radius: 6px;
+  padding: 0 14px;
+  background: #0b6b58;
+  color: white;
+  font-weight: 700;
+}
+
+button.secondary {
+  background: #475467;
+}
+
+button:disabled {
+  opacity: 0.55;
+}
+
+.shell {
+  width: min(1200px, calc(100% - 32px));
+  margin: 0 auto;
+  padding: 30px 0 48px;
+}
+
+header {
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  gap: 20px;
+  margin-bottom: 22px;
+}
+
+header p {
+  margin: 0;
+  color: #667085;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+h1 {
+  margin: 0;
+  font-size: clamp(2.1rem, 4vw, 4.3rem);
+  line-height: 1;
+}
+
+h2,
+h3,
+p {
+  margin-top: 0;
+}
+
+.layout {
+  display: grid;
+  grid-template-columns: 1.15fr 0.85fr;
+  gap: 16px;
+}
+
+.panel {
+  border: 1px solid #d6dde8;
+  border-radius: 8px;
+  padding: 18px;
+  background: white;
+  box-shadow: 0 12px 28px rgba(24, 34, 48, 0.06);
+}
+
+.input-panel {
+  grid-row: span 2;
+}
+
+.panel-heading,
+.actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+textarea {
+  width: 100%;
+  min-height: 430px;
+  margin: 12px 0;
+  resize: vertical;
+  border: 1px solid #cbd5e1;
+  border-radius: 6px;
+  padding: 14px;
+  background: #0f172a;
+  color: #dbeafe;
+  line-height: 1.5;
+}
+
+progress {
+  width: 100%;
+  margin-top: 14px;
+}
+
+.risk-strip {
+  display: flex;
+  justify-content: space-between;
+  padding: 12px;
+  border-radius: 6px;
+  background: #edf4ff;
+}
+
+.risk-strip[data-risk="high"] {
+  background: #fff1f3;
+  color: #b42318;
+}
+
+.risk-strip[data-risk="medium"] {
+  background: #fff7e6;
+  color: #b54708;
+}
+
+.risk-strip[data-risk="low"] {
+  background: #ecfdf3;
+  color: #067647;
+}
+
+.findings {
+  display: grid;
+  gap: 10px;
+  margin-top: 14px;
+}
+
+.findings article {
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  padding: 12px;
+}
+
+.findings span {
+  color: #667085;
+  font-size: 0.78rem;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+output {
+  display: block;
+  min-height: 180px;
+  white-space: pre-wrap;
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  padding: 12px;
+  background: #f8fafc;
+  line-height: 1.55;
+}
+
+.muted {
+  color: #667085;
+}
+
+[role="alert"] {
+  color: #b42318;
+  font-weight: 700;
+}
+
+@media (max-width: 900px) {
+  header,
+  .panel-heading,
+  .actions {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .layout {
+    grid-template-columns: 1fr;
+  }
+}

package/examples/local-review-workbench/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2021",
+    "lib": ["DOM", "DOM.Iterable", "ES2021"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true
+  },
+  "include": ["src", "vite.config.ts"]
+}

package/examples/local-review-workbench/vite.config.ts

@@ -0,0 +1,6 @@
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [react()],
+});

package/examples/local-translator/README.md

@@ -0,0 +1,24 @@
+# Local Translator (Vite + React)
+
+Self-contained example showing:
+
+- `useChromeAITranslator`
+- `useChromeAILanguageDetector`
+- support/availability/status/progress/error diagnostics for both APIs
+- source/target language controls
+- textarea input
+- Detect + Translate actions
+- output panel
+
+## Run
+
+```bash
+cd examples/local-translator
+npm install
+npm run dev
+```
+
+## Notes
+
+This example targets Chrome Built-in AI APIs (if available in your browser).  
+If translator/detector are unavailable, the cards show availability and status states directly from hooks.

package/examples/local-translator/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Local Translator</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/examples/local-translator/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "local-translator-vite-example",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --noEmit && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@vitejs/plugin-react": "^4.3.4",
+    "@yudin-s/react-chrome-ai": "file:../..",
+    "vite": "^6.0.7",
+    "typescript": "^5.7.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.2"
+  }
+}

package/examples/local-translator/src/App.tsx

@@ -0,0 +1,235 @@
+import { FormEvent, useMemo, useState } from "react";
+import {
+  useChromeAITranslator,
+  useChromeAILanguageDetector,
+} from "@yudin-s/react-chrome-ai";
+
+type AsyncState = "idle" | "checking" | "unsupported" | "unavailable" | "downloadable" | "downloading" | "preparing" | "ready" | "prompting" | "streaming" | "aborted" | "error";
+
+function normalizeLanguage(value: unknown): string | null {
+  if (typeof value === "string" && value.trim()) {
+    return value.trim();
+  }
+
+  if (Array.isArray(value)) {
+    for (const item of value) {
+      const candidate = normalizeLanguage(item);
+      if (candidate) {
+        return candidate;
+      }
+    }
+    return null;
+  }
+
+  if (value && typeof value === "object") {
+    const record = value as Record<string, unknown>;
+    for (const key of ["language", "detectedLanguage", "lang", "locale"]) {
+      const candidate = normalizeLanguage(record[key]);
+      if (candidate) {
+        return candidate;
+      }
+    }
+  }
+
+  return null;
+}
+
+function statusToPercent(state: number | undefined, progress?: { progress?: number }) {
+  if (state != null) {
+    return Math.min(100, Math.max(0, Math.round(state * 100)));
+  }
+
+  if (progress?.progress == null) {
+    return null;
+  }
+
+  return Math.min(100, Math.max(0, Math.round(progress.progress * 100)));
+}
+
+function ApiDiagnostic({
+  title,
+  supported,
+  availability,
+  status,
+  progress,
+  error,
+}: {
+  title: string;
+  supported: boolean;
+  availability?: string;
+  status: AsyncState;
+  progress?: { progress?: number; indeterminate?: boolean; completed?: boolean };
+  error?: Error;
+}) {
+  const percent = statusToPercent(progress?.progress, progress);
+  const progressText = percent == null ? "in progress" : `${percent}%`;
+
+  return (
+    <section className="api-card">
+      <h2>{title}</h2>
+      <div className="kv-grid">
+        <div>
+          <strong>Support</strong>
+          <p>{supported ? "Yes" : "No"}</p>
+        </div>
+        <div>
+          <strong>Availability</strong>
+          <p>{availability ?? "unknown"}</p>
+        </div>
+        <div>
+          <strong>Status</strong>
+          <p>{status}</p>
+        </div>
+      </div>
+      {(status === "downloading" || status === "preparing") && (
+        <div className="progress-row">
+          <progress max={100} value={percent ?? undefined} />
+          <span>{progressText}</span>
+        </div>
+      )}
+      {error && <p className="error">Error: {error.message}</p>}
+    </section>
+  );
+}
+
+export function App() {
+  const [sourceText, setSourceText] = useState("Hello. This is a local translator demo.");
+  const [sourceLanguage, setSourceLanguage] = useState("en");
+  const [targetLanguage, setTargetLanguage] = useState("es");
+  const [detectedLanguage, setDetectedLanguage] = useState("");
+
+  const translator = useChromeAITranslator({
+    createOptions: {
+      sourceLanguage: sourceLanguage || "en",
+      targetLanguage: targetLanguage || "en",
+    },
+  });
+
+  const detector = useChromeAILanguageDetector();
+  const isBusy = translator.status === "prompting" || translator.status === "streaming";
+  const isDetecting = detector.status === "prompting" || detector.status === "streaming";
+  const translatedValue = useMemo(() => translator.text.trim(), [translator.text]);
+
+  const onSubmit = (event: FormEvent) => {
+    event.preventDefault();
+    void onTranslate();
+  };
+
+  const onDetect = async () => {
+    if (!sourceText.trim()) {
+      return;
+    }
+    const detected = await detector.run(sourceText);
+    const next = normalizeLanguage(detected);
+    if (next) {
+      setDetectedLanguage(next);
+      setSourceLanguage(next);
+      return;
+    }
+    setDetectedLanguage("Not detected");
+  };
+
+  const onTranslate = async () => {
+    if (!sourceText.trim()) {
+      return;
+    }
+    await translator.run(sourceText);
+  };
+
+  return (
+    <main className="page">
+      <header className="hero">
+        <h1>Local Translator Demo</h1>
+        <p>Chrome AI Translator + LanguageDetector, working in-browser.</p>
+      </header>
+
+      <div className="grid">
+        <ApiDiagnostic
+          title="Translator API"
+          supported={translator.supported}
+          availability={translator.availability}
+          status={translator.status}
+          progress={translator.progress}
+          error={translator.error}
+        />
+        <ApiDiagnostic
+          title="LanguageDetector API"
+          supported={detector.supported}
+          availability={detector.availability}
+          status={detector.status}
+          progress={detector.progress}
+          error={detector.error}
+        />
+      </div>
+
+      <section className="card">
+        <form className="form" onSubmit={onSubmit}>
+          <label className="inline-field">
+            <span>Source language</span>
+            <input
+              value={sourceLanguage}
+              onChange={(event) => setSourceLanguage(event.target.value)}
+              placeholder="en"
+              aria-label="Source language"
+            />
+          </label>
+          <label className="inline-field">
+            <span>Target language</span>
+            <input
+              value={targetLanguage}
+              onChange={(event) => setTargetLanguage(event.target.value)}
+              placeholder="es"
+              aria-label="Target language"
+            />
+          </label>
+          <label className="input-block">
+            <span>Source text</span>
+            <textarea
+              value={sourceText}
+              onChange={(event) => setSourceText(event.target.value)}
+              placeholder="Введите текст для перевода"
+              aria-label="Source text"
+            />
+          </label>
+          <div className="actions">
+            <button type="button" onClick={onDetect} disabled={isDetecting || isBusy}>
+              Detect language
+            </button>
+            <button type="submit" disabled={isBusy || isDetecting}>
+              Translate
+            </button>
+          </div>
+        </form>
+
+        <div className="kv">
+          <span>Detected language:</span>
+          <strong>{detectedLanguage || "—"}</strong>
+        </div>
+        <div className="kv">
+          <span>Output language:</span>
+          <strong>{targetLanguage || "—"}</strong>
+        </div>
+      </section>
+
+      <section className="card">
+        <h2>Output</h2>
+        <output className="output">
+          {translator.status === "prompting" || translator.status === "streaming"
+            ? "Translating..."
+            : translatedValue || "No output yet"}
+        </output>
+      </section>
+
+      {translator.error && (
+        <p role="alert" className="error">
+          Translate error: {translator.error.message}
+        </p>
+      )}
+      {detector.error && (
+        <p role="alert" className="error">
+          Detect error: {detector.error.message}
+        </p>
+      )}
+    </main>
+  );
+}

package/examples/local-translator/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App";
+import "./styles.css";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

package/examples/local-translator/src/styles.css

@@ -0,0 +1,161 @@
+:root {
+  color-scheme: light;
+  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: #f6f7fb;
+  color: #0f172a;
+}
+
+#root {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 2rem 1rem 3rem;
+}
+
+.page {
+  display: grid;
+  gap: 1rem;
+}
+
+.hero h1 {
+  margin: 0;
+  font-size: 1.8rem;
+}
+
+.hero p {
+  margin: 0.5rem 0 0;
+  color: #334155;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 1rem;
+}
+
+.card,
+.api-card {
+  background: #ffffff;
+  border: 1px solid #d4d8e3;
+  border-radius: 8px;
+  padding: 1rem;
+}
+
+h2 {
+  margin: 0 0 0.75rem;
+  font-size: 1.1rem;
+}
+
+.kv-grid {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.kv-grid > div {
+  display: grid;
+  gap: 0.25rem;
+}
+
+.kv-grid p {
+  margin: 0;
+  color: #334155;
+}
+
+.progress-row {
+  margin-top: 0.75rem;
+  display: grid;
+  gap: 0.5rem;
+}
+
+progress {
+  width: 100%;
+  height: 0.6rem;
+}
+
+.form {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.inline-field,
+.input-block {
+  display: grid;
+  gap: 0.35rem;
+}
+
+input,
+textarea {
+  border: 1px solid #cfd8e3;
+  border-radius: 6px;
+  padding: 0.6rem 0.65rem;
+  font: inherit;
+  color: inherit;
+  background: #fff;
+}
+
+textarea {
+  min-height: 150px;
+  resize: vertical;
+}
+
+.actions {
+  display: flex;
+  gap: 0.6rem;
+  flex-wrap: wrap;
+}
+
+button {
+  border: 1px solid #1e293b;
+  color: #f8fafc;
+  background: #1e293b;
+  border-radius: 6px;
+  padding: 0.58rem 0.95rem;
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+button:hover {
+  background: #0f172a;
+}
+
+button:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.kv {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.3rem;
+  margin-top: 0.85rem;
+  padding-top: 0.85rem;
+  border-top: 1px solid #e2e8f0;
+}
+
+.kv span {
+  color: #475569;
+}
+
+.output {
+  display: block;
+  min-height: 130px;
+  white-space: pre-wrap;
+  background: #f8fafc;
+  border: 1px solid #d4d8e3;
+  border-radius: 6px;
+  padding: 0.8rem;
+}
+
+.error {
+  color: #b91c1c;
+  margin: 0.35rem 0 0;
+}

package/examples/local-translator/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2021",
+    "lib": ["DOM", "DOM.Iterable", "ES2021"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true
+  },
+  "include": ["src", "vite.config.ts"]
+}

package/examples/local-translator/vite.config.ts

@@ -0,0 +1,6 @@
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [react()],
+});