Merge pull request #49 from FL33TW00D/feature/0.10.0

Feature/0.10.0

README.md

@@ -1,63 +1,26 @@
 <div align="center">
 <img width="550px" height="200px" src="https://github.com/FL33TW00D/whisper-turbo/raw/master/.github/whisper-turbo.png">
-<p><a href="https://whisper-turbo.com">Demo Site</a> | <a href="https://ratchet.sh/whisper-turbo">Docs</a> | <a href="https://github.com/users/FL33TW00D/projects/1"> Roadmap </a></p>
+<p><a href="https://whisper-turbo.com">Demo Site</a> | <a href="https://ratchet.sh/whisper-turbo">Documentation</a> | <a href="https://github.com/users/FL33TW00D/projects/1">Roadmap</a></p>
 </div>
 
 ## What is Whisper Turbo?
+
 Whisper Turbo is a fast, **cross-platform** Whisper implementation, designed to run entirely client-side in your browser/electron app.
 
-With Whisper Turbo, you can add transcription to any app in minutes.
+Check out [Getting Started](https://ratchet.sh/whisper-turbo) for more.
+
+## Demo
 
-Check out [Getting Started]() for more.
+https://github.com/FL33TW00D/whisper-turbo/assets/45471420/1e19aa1f-bb56-4b5c-bc00-e79aabb4d1e0
 
 ## Supported Platforms
 
 WebGPU is only officially supported on Chromium based browsers running on Windows & MacOS.
-For Linux support, check [here](https://github.com/gpuweb/gpuweb/wiki/Implementation-Status).
-
-## Getting Started 
-
-Install whisper-turbo:
-```bash
-npm install whisper-turbo
-```
-
-```typescript
-const session = useRef<InferenceSession | null>(null);
-
-const loadModel = async () => {
-    //The session manager handles constructing the inference session.
-    const manager = new SessionManager();
-    const loadResult = await manager.loadModel(
-        AvailableModels.WHISPER_TINY,
-        () => { console.log("loaded!") },
-        (progress: number) => { console.log("Loading: ", progress) }
-    );
-    if (loadResult.isErr) {
-        console.log("Failed to load!");
-    } else {
-        session.current = loadResult.value;
-    }
-};
-
-const runSession = async () => {
-    await session.current.transcribe(
-        your_uint8_array,
-        true/false,
-        (s) => {
-            console.log("Segment!") 
-        }
-    );
-};
-```
-
-## Docs
-
-Coming soon
+For more information, check out [Supported Platforms](https://ratchet.sh/whisper-turbo/platforms)
 
 ## Want to get involved?
 
-- Are you a GPU wizard?
-- Do you know what a HRTB is in Rust?
-- Do you know what is going on [here](https://github.com/RuyiLi/cursed-typescript/blob/master/random/game-of-life.ts)?
-- Reach out: chris@fleetwood.dev
+-   Are you a GPU wizard?
+-   Do you know what a HRTB is in Rust?
+-   Do you know what is going on [here](https://github.com/RuyiLi/cursed-typescript/blob/master/random/game-of-life.ts)?
+-   Reach out: chris@fleetwood.dev

package.json

@@ -33,7 +33,7 @@
         "p-retry": "^5.1.2",
         "true-myth": "^6.2.0",
         "uuid": "^9.0.1",
-        "whisper-webgpu": "0.8.0"
+        "whisper-webgpu": "0.9.0"
     },
     "files": [
         "dist/**/*"

playground/package.json

@@ -16,7 +16,7 @@
     "react-hot-toast": "^2.4.1",
     "react-responsive-modal": "^6.4.2",
     "true-myth": "^7.1.0",
-    "whisper-turbo": "0.9.0"
+    "whisper-turbo": "file:.."
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.10",

playground/src/components/configModal.tsx

@@ -0,0 +1,90 @@
+import React, { useState, useEffect } from "react";
+import Modal from "react-responsive-modal";
+import { Task } from "whisper-webgpu";
+import LanguageDropdown from "./languageDropdown";
+import SuppressComponent from "./suppressSelector";
+import TaskComponent from "./taskSelector";
+
+interface ConfigModalProps {
+    isModalOpen: boolean;
+    setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    configOptions: ConfigOptions;
+    setConfigOptions: React.Dispatch<React.SetStateAction<ConfigOptions>>;
+}
+
+export interface ConfigOptions {
+    language: string | null;
+    task: Task;
+    suppress_non_speech: boolean;
+}
+
+const ConfigModal = (props: ConfigModalProps) => {
+    useEffect(() => {
+        //@ts-ignore
+        if (!navigator.gpu) {
+            props.setIsModalOpen(true);
+            return;
+        }
+    }, []);
+
+    const handleModalClose = () => {
+        props.setIsModalOpen(false);
+    };
+
+    const closeIcon = (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            version="1.1"
+            width="50"
+            height="50"
+            viewBox="0 0 78 97.5"
+            fill="currentColor"
+        >
+            <g>
+                <rect x="54" y="54" width="6" height="6" />
+                <rect x="36" y="36" width="6" height="6" />
+                <rect x="30" y="42" width="6" height="6" />
+                <rect x="24" y="48" width="6" height="6" />
+                <rect x="18" y="54" width="6" height="6" />
+                <rect x="42" y="30" width="6" height="6" />
+                <rect x="48" y="24" width="6" height="6" />
+                <rect x="54" y="18" width="6" height="6" />
+                <rect x="42" y="42" width="6" height="6" />
+                <rect x="48" y="48" width="6" height="6" />
+                <rect x="30" y="30" width="6" height="6" />
+                <rect x="18" y="18" width="6" height="6" />
+                <rect x="24" y="24" width="6" height="6" />
+            </g>
+        </svg>
+    );
+
+    return (
+        <>
+            <Modal
+                classNames={{
+                    modal: "!bg-pop-orange !outline h-3/4 w-3/4 md:w-3/4 xl:w-1/2 2xl:w-1/3 overflow-x-hidden !text-white",
+                }}
+                open={props.isModalOpen}
+                onClose={handleModalClose}
+                center
+                closeIcon={closeIcon}
+            >
+                <div
+                    className="flex flex-col text-2xl h-full text-center"
+                    style={{
+                        fontFamily: "__VT323_2a9463",
+                    }}
+                >
+                    <div className="flex flex-col p-8 gap-y-8 mx-auto w-full">
+                        <LanguageDropdown configOptions={props.configOptions} setConfigOptions={props.setConfigOptions} />
+                        <TaskComponent configOptions={props.configOptions} setConfigOptions={props.setConfigOptions} />
+                        <SuppressComponent configOptions={props.configOptions} setConfigOptions={props.setConfigOptions} />
+                    </div>
+                </div>
+            </Modal>
+            )
+        </>
+    );
+};
+
+export default ConfigModal;