Implement WebGPU detection and integrate Kokoro TTS worker; update TypeScript config and add accordion component
This commit is contained in:
parent
5c303b594b
commit
73a0fba45e
GPG Key ID:
F6BFCA1B80EA6AF7
@ -1,4 +1,5 @@
|
||||
import { AppSidebar } from "@/components/app-sidebar";
|
||||
import KokoroReader from "@/components/KokoroReader";
|
||||
import { NavActions } from "@/components/nav-actions";
|
||||
import {
|
||||
Breadcrumb,
|
||||
@ -6,6 +7,12 @@ import {
|
||||
BreadcrumbList,
|
||||
BreadcrumbPage,
|
||||
} from "@/components/ui/breadcrumb";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import {
|
||||
SidebarInset,
|
||||
@ -13,6 +20,7 @@ import {
|
||||
SidebarTrigger,
|
||||
} from "@/components/ui/sidebar";
|
||||
import { createClient } from "@/utils/supabase/server";
|
||||
import { Speech } from "lucide-react";
|
||||
import { redirect } from "next/navigation";
|
||||
import { remark } from "remark";
|
||||
import remarkHtml from "remark-html";
|
||||
@ -96,7 +104,7 @@ export default async function DocumentPage({
|
||||
</Breadcrumb>
|
||||
</div>
|
||||
<div className="ml-auto px-3">
|
||||
<NavActions />
|
||||
<NavActions pages={pages} />
|
||||
</div>
|
||||
</header>
|
||||
<div
|
||||
@ -104,6 +112,7 @@ export default async function DocumentPage({
|
||||
text-white
|
||||
prose-h1:font-semibold prose-h1:text-2xl prose-h1:mb-4 prose-h1:text-white
|
||||
prose-h2:font-medium prose-h2:text-xl prose-h2:mb-3 prose-h2:text-white
|
||||
prose-h4:font-medium prose-h4:text-lg prose-h4:mb-2 prose-h4:text-gray-300
|
||||
prose-a:text-blue-400 hover:prose-a:underline
|
||||
prose-p:leading-7 prose-p:text-gray-200
|
||||
prose-blockquote:italic prose-blockquote:border-l-4 prose-blockquote:pl-4 prose-blockquote:border-gray-600 prose-blockquote:text-gray-300
|
||||
|
||||
@ -26,9 +26,33 @@ export default async function Page() {
|
||||
return redirect("/login");
|
||||
}
|
||||
|
||||
const { data: documents, error } = await supabase
|
||||
.from("documents")
|
||||
.select("*")
|
||||
.eq("owner", user.id)
|
||||
.order("created_at", { ascending: false });
|
||||
|
||||
if (error) {
|
||||
console.error("Failed to fetch documents:", error);
|
||||
// Optionally handle the error, e.g., show a message to the user
|
||||
return (
|
||||
<div className="p-4">
|
||||
<p className="text-red-600">Failed to load documents.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<SidebarProvider>
|
||||
<AppSidebar />
|
||||
<AppSidebar
|
||||
documents={documents.map((d) => {
|
||||
return {
|
||||
name: d.file_name,
|
||||
url: `/dashboard/documents/${d.id}`,
|
||||
emoji: "📄",
|
||||
};
|
||||
})}
|
||||
/>
|
||||
<SidebarInset>
|
||||
<header className="flex h-14 shrink-0 items-center gap-2">
|
||||
<div className="flex flex-1 items-center gap-2 px-3">
|
||||
@ -40,8 +64,8 @@ export default async function Page() {
|
||||
<Breadcrumb>
|
||||
<BreadcrumbList>
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbPage className="line-clamp-1">
|
||||
Project Management & Task Tracking
|
||||
<BreadcrumbPage className="line-clamp-1 text-muted-foreground">
|
||||
Select a document...
|
||||
</BreadcrumbPage>
|
||||
</BreadcrumbItem>
|
||||
</BreadcrumbList>
|
||||
|
||||
175
components/KokoroReader.tsx
Normal file
175
components/KokoroReader.tsx
Normal file
@ -0,0 +1,175 @@
|
||||
"use client";
|
||||
import { useRef, useState, useEffect } from "react";
|
||||
import { Button } from "./ui/button";
|
||||
import { Play } from "lucide-react";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
} from "./ui/accordion";
|
||||
import { Label } from "./ui/label";
|
||||
|
||||
export default function KokoroReader({ pages }: { pages: any[] }) {
|
||||
// Create a reference to the worker object.
|
||||
const worker = useRef<Worker>(null);
|
||||
|
||||
const [inputText, setInputText] = useState(
|
||||
"Life is like a box of chocolates. You never know what you're gonna get."
|
||||
);
|
||||
const [selectedSpeaker, setSelectedSpeaker] = useState("af_heart");
|
||||
|
||||
const [voices, setVoices] = useState<any[]>([]);
|
||||
const [status, setStatus] = useState<"ready" | "running" | null>(null);
|
||||
const [error, setError] = useState(null);
|
||||
const [loadingMessage, setLoadingMessage] = useState("Loading...");
|
||||
|
||||
const [results, setResults] = useState<{ text: string; src: string }[]>([]);
|
||||
|
||||
// We use the `useEffect` hook to setup the worker as soon as the `App` component is mounted.
|
||||
useEffect(() => {
|
||||
// Create the worker if it does not yet exist.
|
||||
console.log("Initializing worker...");
|
||||
worker.current ??= new Worker("/workers/kokoro-worker.js", {
|
||||
type: "module",
|
||||
});
|
||||
|
||||
console.log("Worker initialized");
|
||||
|
||||
// Create a callback function for messages from the worker thread.
|
||||
const onMessageReceived = (e: any) => {
|
||||
switch (e.data.status) {
|
||||
case "device":
|
||||
setLoadingMessage(`Loading model (device="${e.data.device}")`);
|
||||
break;
|
||||
case "ready":
|
||||
setStatus("ready");
|
||||
setVoices(e.data.voices);
|
||||
break;
|
||||
case "error":
|
||||
setError(e.data.data);
|
||||
break;
|
||||
case "complete":
|
||||
const { audio, text } = e.data;
|
||||
// Generation complete: re-enable the "Generate" button
|
||||
setResults((prev) => [{ text, src: audio }, ...prev]);
|
||||
setStatus("ready");
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
console.log("onmessagereceived");
|
||||
|
||||
const onErrorReceived = (e: any) => {
|
||||
console.error("Worker error:", e);
|
||||
setError(e.message);
|
||||
};
|
||||
|
||||
console.log("Attaching event listeners to worker");
|
||||
|
||||
// Attach the callback function as an event listener.
|
||||
worker.current.addEventListener("message", onMessageReceived);
|
||||
worker.current.addEventListener("error", onErrorReceived);
|
||||
|
||||
console.log(worker.current);
|
||||
// Define a cleanup function for when the component is unmounted.
|
||||
return () => {
|
||||
worker.current!.removeEventListener("message", onMessageReceived);
|
||||
worker.current!.removeEventListener("error", onErrorReceived);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleSubmit = (e: any) => {
|
||||
e.preventDefault();
|
||||
setStatus("running");
|
||||
|
||||
worker.current!.postMessage({
|
||||
type: "generate",
|
||||
text: inputText.trim(),
|
||||
voice: selectedSpeaker,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center pt-4 relative overflow-hidden font-sans">
|
||||
<div className="max-w-3xl w-full relative z-[2]">
|
||||
<div className="items-center justify-center text-center">
|
||||
<Button variant="ghost" size="icon" className="h-10 w-10">
|
||||
<Play />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Accordion type="single" collapsible>
|
||||
<AccordionItem value="item-1">
|
||||
<AccordionTrigger className="text-white pb-2">
|
||||
Settings
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="pb-2">
|
||||
<Label>Voice</Label>
|
||||
<select
|
||||
value={selectedSpeaker}
|
||||
onChange={(e) => setSelectedSpeaker(e.target.value)}
|
||||
className="w-full bg-gray-700/50 backdrop-blur-sm border-2 border-gray-600 rounded-md text-gray-100 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
>
|
||||
{Object.entries(voices).map(([id, voice]) => (
|
||||
<option key={id} value={id}>
|
||||
{voice.name} (
|
||||
{voice.language === "en-us" ? "American" : "British"}{" "}
|
||||
{voice.gender})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
</div>
|
||||
{/* <div className="bg-gray-800/50 backdrop-blur-sm border border-gray-700 rounded-lg p-6">
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<textarea
|
||||
placeholder="Enter text..."
|
||||
value={inputText}
|
||||
onChange={(e) => setInputText(e.target.value)}
|
||||
className="w-full min-h-[100px] max-h-[300px] bg-gray-700/50 backdrop-blur-sm border-2 border-gray-600 rounded-xl resize-y text-gray-100 placeholder-gray-400 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
rows={Math.min(8, inputText.split("\n").length)}
|
||||
/>
|
||||
<div className="flex flex-col items-center space-y-4">
|
||||
<select
|
||||
value={selectedSpeaker}
|
||||
onChange={(e) => setSelectedSpeaker(e.target.value)}
|
||||
className="w-full bg-gray-700/50 backdrop-blur-sm border-2 border-gray-600 rounded-xl text-gray-100 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
>
|
||||
{Object.entries(voices).map(([id, voice]) => (
|
||||
<option key={id} value={id}>
|
||||
{voice.name} (
|
||||
{voice.language === "en-us" ? "American" : "British"}{" "}
|
||||
{voice.gender})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<button
|
||||
type="submit"
|
||||
className="inline-flex justify-center items-center px-6 py-2 text-lg font-semibold bg-gradient-to-t from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 transition-colors duration-300 rounded-xl text-white disabled:opacity-50"
|
||||
disabled={status === "running" || inputText.trim() === ""}
|
||||
>
|
||||
{status === "running" ? "Generating..." : "Generate"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div> */}
|
||||
|
||||
{results.map((result, i) => (
|
||||
<div key={i}>
|
||||
<div className="text-white bg-gray-800/70 backdrop-blur-sm border border-gray-700 rounded-lg p-4 z-10">
|
||||
<span className="absolute right-5 font-bold">
|
||||
#{results.length - i}
|
||||
</span>
|
||||
<p className="mb-3 max-w-[95%]">{result.text}</p>
|
||||
<audio controls src={result.src} className="w-full">
|
||||
Your browser does not support the audio element.
|
||||
</audio>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
"use client"
|
||||
"use client";
|
||||
|
||||
import * as React from "react"
|
||||
import * as React from "react";
|
||||
import {
|
||||
ArrowDown,
|
||||
ArrowUp,
|
||||
@ -14,17 +14,18 @@ import {
|
||||
Link,
|
||||
MoreHorizontal,
|
||||
Settings2,
|
||||
Speech,
|
||||
Star,
|
||||
Trash,
|
||||
Trash2,
|
||||
} from "lucide-react"
|
||||
} from "lucide-react";
|
||||
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover"
|
||||
} from "@/components/ui/popover";
|
||||
import {
|
||||
Sidebar,
|
||||
SidebarContent,
|
||||
@ -33,7 +34,8 @@ import {
|
||||
SidebarMenu,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
} from "@/components/ui/sidebar"
|
||||
} from "@/components/ui/sidebar";
|
||||
import KokoroReader from "./KokoroReader";
|
||||
|
||||
const data = [
|
||||
[
|
||||
@ -96,20 +98,30 @@ const data = [
|
||||
icon: ArrowDown,
|
||||
},
|
||||
],
|
||||
]
|
||||
];
|
||||
|
||||
export function NavActions() {
|
||||
const [isOpen, setIsOpen] = React.useState(false)
|
||||
export function NavActions({ pages }: { pages: any[] }) {
|
||||
const [isOpen, setIsOpen] = React.useState(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
setIsOpen(true)
|
||||
}, [])
|
||||
setIsOpen(true);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<div className="text-muted-foreground hidden font-medium md:inline-block">
|
||||
{/* <div className="text-muted-foreground hidden font-medium md:inline-block">
|
||||
Edit Oct 08
|
||||
</div>
|
||||
</div> */}
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="h-7 w-7">
|
||||
<Speech />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent>
|
||||
<KokoroReader pages={pages} />
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<Button variant="ghost" size="icon" className="h-7 w-7">
|
||||
<Star />
|
||||
</Button>
|
||||
@ -149,5 +161,5 @@ export function NavActions() {
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
66
components/ui/accordion.tsx
Normal file
66
components/ui/accordion.tsx
Normal file
@ -0,0 +1,66 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as AccordionPrimitive from "@radix-ui/react-accordion"
|
||||
import { ChevronDownIcon } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Accordion({
|
||||
...props
|
||||
}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
|
||||
return <AccordionPrimitive.Root data-slot="accordion" {...props} />
|
||||
}
|
||||
|
||||
function AccordionItem({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
|
||||
return (
|
||||
<AccordionPrimitive.Item
|
||||
data-slot="accordion-item"
|
||||
className={cn("border-b last:border-b-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AccordionTrigger({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
|
||||
return (
|
||||
<AccordionPrimitive.Header className="flex">
|
||||
<AccordionPrimitive.Trigger
|
||||
data-slot="accordion-trigger"
|
||||
className={cn(
|
||||
"focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
|
||||
</AccordionPrimitive.Trigger>
|
||||
</AccordionPrimitive.Header>
|
||||
)
|
||||
}
|
||||
|
||||
function AccordionContent({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
|
||||
return (
|
||||
<AccordionPrimitive.Content
|
||||
data-slot="accordion-content"
|
||||
className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
|
||||
{...props}
|
||||
>
|
||||
<div className={cn("pt-0 pb-4", className)}>{children}</div>
|
||||
</AccordionPrimitive.Content>
|
||||
)
|
||||
}
|
||||
|
||||
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
|
||||
@ -4,3 +4,12 @@ import { twMerge } from "tailwind-merge";
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
|
||||
export async function detectWebGPU() {
|
||||
try {
|
||||
const adapter = await navigator.gpu.requestAdapter();
|
||||
return !!adapter;
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,6 +2,20 @@ import type { NextConfig } from "next";
|
||||
|
||||
const nextConfig: NextConfig = {
|
||||
/* config options here */
|
||||
webpack: (config, { isServer }) => {
|
||||
if (!isServer) {
|
||||
config.module.rules.push({
|
||||
test: /kokoro-worker\.js$/,
|
||||
use: { loader: "worker-loader" },
|
||||
});
|
||||
}
|
||||
|
||||
config.module.rules.push({
|
||||
test: /\.js$/,
|
||||
loader: "@open-wc/webpack-import-meta-loader",
|
||||
});
|
||||
return config;
|
||||
},
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
|
||||
@ -9,6 +9,7 @@
|
||||
"dependencies": {
|
||||
"@ai-sdk/mistral": "^1.2.3",
|
||||
"@mistralai/mistralai": "^1.5.2",
|
||||
"@radix-ui/react-accordion": "^1.2.3",
|
||||
"@radix-ui/react-checkbox": "^1.1.1",
|
||||
"@radix-ui/react-collapsible": "^1.1.3",
|
||||
"@radix-ui/react-dialog": "^1.1.6",
|
||||
@ -26,6 +27,7 @@
|
||||
"autoprefixer": "10.4.20",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"kokoro-js": "^1.2.0",
|
||||
"lucide-react": "^0.486.0",
|
||||
"next": "latest",
|
||||
"next-themes": "^0.4.3",
|
||||
@ -38,6 +40,7 @@
|
||||
"zod": "^3.24.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@open-wc/webpack-import-meta-loader": "^0.4.7",
|
||||
"@types/node": "22.10.2",
|
||||
"@types/react": "^19.0.2",
|
||||
"@types/react-dom": "19.0.2",
|
||||
@ -46,6 +49,7 @@
|
||||
"tailwind-merge": "^2.5.2",
|
||||
"tailwindcss": "^4.1.0",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"typescript": "5.7.2"
|
||||
"typescript": "5.7.2",
|
||||
"worker-loader": "^3.0.8"
|
||||
}
|
||||
}
|
||||
|
||||
49
public/workers/kokoro-worker.js
Normal file
49
public/workers/kokoro-worker.js
Normal file
@ -0,0 +1,49 @@
|
||||
console.log("Initializing Kokoro TTS Worker");
|
||||
|
||||
import { KokoroTTS } from "https://cdn.jsdelivr.net/npm/kokoro-js@1.2.0/+esm";
|
||||
async function detectWebGPU() {
|
||||
try {
|
||||
const adapter = await navigator.gpu.requestAdapter();
|
||||
return !!adapter;
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
// Device detection
|
||||
const device = (await detectWebGPU()) ? "webgpu" : "wasm";
|
||||
self.postMessage({ status: "device", device });
|
||||
|
||||
console.log(`Detected device: ${device}`);
|
||||
|
||||
// Load the model
|
||||
const model_id = "onnx-community/Kokoro-82M-v1.0-ONNX";
|
||||
const tts = await KokoroTTS.from_pretrained(model_id, {
|
||||
dtype: device === "wasm" ? "q8" : "fp32",
|
||||
device,
|
||||
});
|
||||
|
||||
console.log("Kokoro TTS model loaded successfully");
|
||||
|
||||
self.postMessage({ status: "ready", voices: tts.voices, device });
|
||||
|
||||
console.log("Available voices:", tts.voices);
|
||||
|
||||
// Listen for messages from the main thread
|
||||
self.addEventListener("message", async (e) => {
|
||||
const { text, voice } = e.data;
|
||||
|
||||
try {
|
||||
// Generate speech
|
||||
const audio = await tts.generate(text, { voice });
|
||||
|
||||
// Send the audio file back to the main thread
|
||||
const blob = audio.toBlob();
|
||||
self.postMessage({
|
||||
status: "complete",
|
||||
audio: URL.createObjectURL(blob),
|
||||
text,
|
||||
});
|
||||
} catch (error) {
|
||||
self.postMessage({ status: "error", error: error.message });
|
||||
}
|
||||
});
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"target": "ESNext",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
@ -23,6 +23,12 @@
|
||||
"@/*": ["./*"]
|
||||
}
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||
"include": [
|
||||
"next-env.d.ts",
|
||||
"**/*.ts",
|
||||
"**/*.tsx",
|
||||
".next/types/**/*.ts",
|
||||
"public/kokoro-worker.js"
|
||||
],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user