├── shush
    ├── bun.lockb
    ├── .eslintrc.json
    ├── .env.example
    ├── app
    │   ├── favicon.ico
    │   ├── tryit
    │   │   ├── [call_id]
    │   │   │   ├── reqFail.tsx
    │   │   │   ├── loading.tsx
    │   │   │   ├── reqProgress.tsx
    │   │   │   └── page.tsx
    │   │   └── page.tsx
    │   ├── layout.tsx
    │   ├── globals.css
    │   └── page.tsx
    ├── next.config.js
    ├── postcss.config.js
    ├── lib
    │   ├── utils.ts
    │   └── hooks
    │   │   └── use-copy-to-clipboard.tsx
    ├── components
    │   ├── footer.tsx
    │   ├── share-url.tsx
    │   ├── python-logo.tsx
    │   ├── ui
    │   │   ├── button.tsx
    │   │   ├── tabs.tsx
    │   │   ├── codeblock.tsx
    │   │   └── dialog.tsx
    │   ├── data-viewer.tsx
    │   ├── navbar.tsx
    │   ├── stats.tsx
    │   ├── audio-submit.tsx
    │   ├── waveform.tsx
    │   └── code-host.tsx
    ├── components.json
    ├── .gitignore
    ├── public
    │   ├── vercel.svg
    │   └── next.svg
    ├── tsconfig.json
    ├── package.json
    ├── README.md
    └── tailwind.config.js
├── .gitattributes
├── .gitignore
├── LICENSE
├── README.md
└── modal
    ├── modal_app.py
    └── shush.py


/shush/bun.lockb:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arihanv/Shush/HEAD/shush/bun.lockb


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/shush/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": ["next/babel","next/core-web-vitals"]
3 | }
4 | 


--------------------------------------------------------------------------------
/shush/.env.example:
--------------------------------------------------------------------------------
1 | NEXT_PUBLIC_MODAL_URL=https://[ORG_NAME]--[STUB_NAME]-entrypoint.modal.run


--------------------------------------------------------------------------------
/shush/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arihanv/Shush/HEAD/shush/app/favicon.ico


--------------------------------------------------------------------------------
/shush/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {}
3 | 
4 | module.exports = nextConfig
5 | 


--------------------------------------------------------------------------------
/shush/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/shush/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 |  
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs))
6 | }
7 | 


--------------------------------------------------------------------------------
/shush/app/tryit/[call_id]/reqFail.tsx:
--------------------------------------------------------------------------------
1 | export default function ReqFail() {
2 |   return (
3 |     <div className="h-[80vh] flex justify-center items-center">
4 |       <div className="bg-red-200 w-fit px-2.5 rounded-xl border-red-300 border text-red-400 flex gap-1 items-center">
5 |         Failed to fetch response
6 |       </div>
7 |     </div>
8 |   )
9 | }


--------------------------------------------------------------------------------
/shush/components/footer.tsx:
--------------------------------------------------------------------------------
1 | import Link from 'next/link'
2 | import React from 'react'
3 | 
4 | export default function Footer() {
5 |   return (
6 |     <span className='w-screen flex justify-center py-3 bg-gray-100 text-gray-500 border-gray-300 border text-sm'>Made With ❤️&nbsp;by&nbsp;<Link target='_' href='https://arihanv.com/'>Arihan Varanasi</Link></span>
7 | 
8 |   )
9 | }


--------------------------------------------------------------------------------
/shush/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "new-york",
 4 |   "rsc": true,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.js",
 8 |     "css": "app/globals.css",
 9 |     "baseColor": "slate",
10 |     "cssVariables": true
11 |   },
12 |   "aliases": {
13 |     "components": "@/components",
14 |     "utils": "@/lib/utils"
15 |   }
16 | }


--------------------------------------------------------------------------------
/shush/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | .yarn/install-state.gz
 8 | 
 9 | # testing
10 | /coverage
11 | 
12 | # next.js
13 | /.next/
14 | /out/
15 | 
16 | # production
17 | /build
18 | 
19 | # misc
20 | .DS_Store
21 | *.pem
22 | 
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | 


--------------------------------------------------------------------------------
/shush/app/tryit/[call_id]/loading.tsx:
--------------------------------------------------------------------------------
 1 | import { Loader2 } from "lucide-react";
 2 | import React from "react";
 3 | 
 4 | export default function Loading() {
 5 |   return (
 6 |     <div className="h-[80vh] flex justify-center items-center">
 7 |       <div className="bg-gray-100 w-fit px-2.5 rounded-xl border-gray-300 border text-gray-600 flex gap-1 items-center">
 8 |         <div className="animate-spin items-center flex">
 9 |           <Loader2 size={15} />
10 |         </div>{" "}
11 |         Checking Up On Your Function Call
12 |       </div>
13 |     </div>
14 |   );
15 | }
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | .yarn/install-state.gz
 8 | 
 9 | # testing
10 | /coverage
11 | 
12 | # next.js
13 | /.next/
14 | /out/
15 | 
16 | # production
17 | /build
18 | 
19 | # misc
20 | .DS_Store
21 | *.pem
22 | 
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 
28 | # local env files
29 | .env*.local
30 | shush/.env
31 | 
32 | # vercel
33 | .vercel
34 | 
35 | # typescript
36 | *.tsbuildinfo
37 | next-env.d.ts
38 | 
39 | # python
40 | __pycache__/


--------------------------------------------------------------------------------
/shush/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>


--------------------------------------------------------------------------------
/shush/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "noEmit": true,
 9 |     "esModuleInterop": true,
10 |     "module": "esnext",
11 |     "moduleResolution": "bundler",
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "jsx": "preserve",
15 |     "incremental": true,
16 |     "plugins": [
17 |       {
18 |         "name": "next"
19 |       }
20 |     ],
21 |     "paths": {
22 |       "@/*": ["./*"]
23 |     }
24 |   },
25 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 |   "exclude": ["node_modules"]
27 | }
28 | 


--------------------------------------------------------------------------------
/shush/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from "next";
 2 | import { GeistSans } from "geist/font/sans";
 3 | import "./globals.css";
 4 | import Navbar from "@/components/navbar";
 5 | import { Toaster } from 'sonner'
 6 | 
 7 | export const metadata: Metadata = {
 8 |   title: "Shush",
 9 |   description:
10 |     "A demo showcasing the power of WhisperV3 with enhancements from Insanely-Fast-Whisper",
11 | };
12 | 
13 | export default function RootLayout({
14 |   children,
15 | }: {
16 |   children: React.ReactNode;
17 | }) {
18 |   return (
19 |     <html lang="en">
20 |       <body className={GeistSans.className}>
21 |         <Toaster />
22 |         <Navbar/>
23 |         {children}
24 |       </body>
25 |     </html>
26 |   );
27 | }
28 | 


--------------------------------------------------------------------------------
/shush/app/tryit/[call_id]/reqProgress.tsx:
--------------------------------------------------------------------------------
 1 | import { Loader2 } from "lucide-react";
 2 | 
 3 | export default function ReqProgress() {
 4 |   return (
 5 |     <div className="h-[80vh] flex justify-center items-center">
 6 |         <div className="flex flex-col gap-2 items-center">
 7 |       <div className="bg-gray-100 w-fit px-2.5 rounded-xl border-gray-300 border text-gray-600 flex gap-1 items-center">
 8 |         <div className="animate-spin items-center flex">
 9 |           <Loader2 size={15} />
10 |         </div>{" "}
11 |         Function Call Is In Progress
12 |       </div>
13 |         <div className="text-gray-600 text-opacity-70 text-xs sm:text-sm">
14 |             You can stay on this page or come back later to the same url
15 |         </div>
16 |       </div>
17 |     </div>
18 |   )
19 | }


--------------------------------------------------------------------------------
/shush/lib/hooks/use-copy-to-clipboard.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import * as React from 'react'
 4 | 
 5 | export interface useCopyToClipboardProps {
 6 |   timeout?: number
 7 | }
 8 | 
 9 | export function useCopyToClipboard({
10 |   timeout = 2000
11 | }: useCopyToClipboardProps) {
12 |   const [isCopied, setIsCopied] = React.useState<Boolean>(false)
13 | 
14 |   const copyToClipboard = (value: string) => {
15 |     if (typeof window === 'undefined' || !navigator.clipboard?.writeText) {
16 |       return
17 |     }
18 | 
19 |     if (!value) {
20 |       return
21 |     }
22 | 
23 |     navigator.clipboard.writeText(value).then(() => {
24 |       setIsCopied(true)
25 | 
26 |       setTimeout(() => {
27 |         setIsCopied(false)
28 |       }, timeout)
29 |     })
30 |   }
31 | 
32 |   return { isCopied, copyToClipboard }
33 | }
34 | 


--------------------------------------------------------------------------------
/shush/app/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 |  
 5 | @layer base {
 6 |   :root {
 7 |     --background: 0 0% 100%;
 8 |     --foreground: 240 10% 3.9%;
 9 |     --card: 0 0% 100%;
10 |     --card-foreground: 240 10% 3.9%;
11 |     --popover: 0 0% 100%;
12 |     --popover-foreground: 240 10% 3.9%;
13 |     --primary: 240 5.9% 10%;
14 |     --primary-foreground: 0 0% 98%;
15 |     --secondary: 240 4.8% 95.9%;
16 |     --secondary-foreground: 240 5.9% 10%;
17 |     --muted: 240 4.8% 95.9%;
18 |     --muted-foreground: 240 3.8% 46.1%;
19 |     --accent: 240 4.8% 95.9%;
20 |     --accent-foreground: 240 5.9% 10%;
21 |     --destructive: 0 72.22% 50.59%;
22 |     --destructive-foreground: 0 0% 98%;
23 |     --border: 240 5.9% 90%;
24 |     --input: 240 5.9% 90%;
25 |     --ring: 240 5% 64.9%;
26 |     --radius: 0.5rem;
27 |   }
28 | }
29 |  
30 | @layer base {
31 |   * {
32 |     @apply border-border;
33 |   }
34 |   body {
35 |     @apply bg-background text-foreground;
36 |   }
37 | }
38 | 
39 | html{
40 |   scroll-behavior: smooth;
41 | }


--------------------------------------------------------------------------------
/shush/components/share-url.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import React from "react";
 4 | import { usePathname } from "next/navigation";
 5 | import { useCopyToClipboard } from "@/lib/hooks/use-copy-to-clipboard";
 6 | import { Check, Copy } from "lucide-react";
 7 | 
 8 | type Props = {
 9 |   host: string;
10 |   call_id: string;
11 | };
12 | 
13 | export default function ShareUrl({ host, call_id }: Props) {
14 |   const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2000 });
15 |   const onCopy = () => {
16 |     if (isCopied) return;
17 |     copyToClipboard(`${host}/${call_id}`);
18 |   };
19 |   return (
20 |     <div className="prose flex gap-2 my-3 overflow-scroll w-full">
21 |       <pre className="p-2 bg-gray-100 text-black border-gray-300 border m-0 w-full">
22 |           {host}/{call_id}
23 |       </pre>
24 |       <button onClick={onCopy} className="flex items-center justify-center">
25 |         {isCopied ? <Check height={15} /> : <Copy height={15} />}
26 |         <span className="sr-only">Copy url</span>
27 |       </button>
28 |     </div>
29 |   );
30 | }
31 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 arihanv
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/shush/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "shush",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@radix-ui/react-dialog": "^1.0.5",
13 |     "@radix-ui/react-icons": "^1.3.0",
14 |     "@radix-ui/react-slot": "^1.0.2",
15 |     "@radix-ui/react-tabs": "^1.0.4",
16 |     "class-variance-authority": "^0.7.0",
17 |     "clsx": "^2.0.0",
18 |     "geist": "^1.1.0",
19 |     "lucide-react": "^0.292.0",
20 |     "next": "14.0.3",
21 |     "react": "^18",
22 |     "react-dom": "^18",
23 |     "react-syntax-highlighter": "^15.5.0",
24 |     "sonner": "^1.2.0",
25 |     "tailwind-merge": "^2.0.0",
26 |     "tailwindcss-animate": "^1.0.7",
27 |     "wavesurfer.js": "^7.4.6"
28 |   },
29 |   "devDependencies": {
30 |     "@tailwindcss/typography": "^0.5.10",
31 |     "@types/node": "^20",
32 |     "@types/react": "^18",
33 |     "@types/react-dom": "^18",
34 |     "autoprefixer": "^10.0.1",
35 |     "eslint": "^8",
36 |     "eslint-config-next": "14.0.3",
37 |     "postcss": "^8",
38 |     "tailwindcss": "^3.3.0",
39 |     "typescript": "^5"
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/shush/public/next.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>


--------------------------------------------------------------------------------
/shush/README.md:
--------------------------------------------------------------------------------
 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 2 | 
 3 | ## Getting Started
 4 | 
 5 | First, run the development server:
 6 | 
 7 | ```bash
 8 | npm run dev
 9 | # or
10 | yarn dev
11 | # or
12 | pnpm dev
13 | # or
14 | bun dev
15 | ```
16 | 
17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18 | 
19 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
20 | 
21 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
22 | 
23 | ## Learn More
24 | 
25 | To learn more about Next.js, take a look at the following resources:
26 | 
27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
29 | 
30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
31 | 
32 | ## Deploy on Vercel
33 | 
34 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
35 | 
36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
37 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Shush
 2 | 
 3 | 
 4 | https://github.com/arihanv/Shush/assets/63890951/6e675260-c29a-4fd4-8ba5-0b70549f0bcd
 5 | 
 6 | 
 7 | 
 8 | 
 9 | 
10 | Shush is an app that deploys a WhisperV3 model with Flash Attention v2 on Modal and makes requests to it via a NextJS app. The essential **goal** of this app is to provide a full-stack demo to those interested in running high-performance models and reliable APIs on demand with auto-scaling.
11 | 
12 | This is a demo app built with [Next.js](https://nextjs.org/) (Frontend) + [Modal](https://modal.com/) (Backend).
13 | 
14 | # Set Up
15 | Visit [modal.com](https://modal.com/) and create a free account. Then follow the instructions to install the Modal python package and authenticate in your CLI.
16 | 
17 | ## Deploy backend
18 | We will be using Modal to deploy and serve [WhisperV3](https://github.com/openai/whisper), an audio transcription model built by OpenAI.
19 | 
20 | Execute the following commands in your terminal:
21 | ```
22 | cd modal
23 | modal deploy shush.py
24 | ```
25 | This is should give you a url in the form: `https://[ORG_NAME]--[STUB_NAME]-entrypoint.modal.run`
26 | 
27 | ## Deploy Frontend
28 | Now let's run the NextJS app. After going back to the root of the repo, execute the following commands:
29 | ```
30 | cd shush
31 | ```
32 | Now create a `.env` file and add the url we got from Modal (view `.env.example` for reference)
33 | 
34 | Then we can just do:
35 | ```
36 | bun i
37 | bun run dev
38 | ```
39 | 
40 | And that's it! Open http://localhost:3000/ in your browser and test the app + model out!
41 | 


--------------------------------------------------------------------------------
/shush/components/python-logo.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | type Props = {
 4 |   height: number;
 5 |   className?: string;
 6 | };
 7 | 
 8 | export default function PythonLogo({ height, className }: Props) {
 9 |   return (
10 |     <svg viewBox="0 0 128 128" height={height} className={className}>
11 |       <path
12 |         fill="#0074C8"
13 |         d="M63.391 1.988c-4.222.02-8.252.379-11.8 1.007-10.45 1.846-12.346 5.71-12.346 12.837v9.411h24.693v3.137H29.977c-7.176 0-13.46 4.313-15.426 12.521-2.268 9.405-2.368 15.275 0 25.096 1.755 7.311 5.947 12.519 13.124 12.519h8.491V67.234c0-8.151 7.051-15.34 15.426-15.34h24.665c6.866 0 12.346-5.654 12.346-12.548V15.833c0-6.693-5.646-11.72-12.346-12.837-4.244-.706-8.645-1.027-12.866-1.008zM50.037 9.557c2.55 0 4.634 2.117 4.634 4.721 0 2.593-2.083 4.69-4.634 4.69-2.56 0-4.633-2.097-4.633-4.69-.001-2.604 2.073-4.721 4.633-4.721z"
14 |         transform="translate(0 10.26)"
15 |       ></path>
16 |       <path
17 |         fill="#0074C8"
18 |         d="M91.682 28.38v10.966c0 8.5-7.208 15.655-15.426 15.655H51.591c-6.756 0-12.346 5.783-12.346 12.549v23.515c0 6.691 5.818 10.628 12.346 12.547 7.816 2.297 15.312 2.713 24.665 0 6.216-1.801 12.346-5.423 12.346-12.547v-9.412H63.938v-3.138h37.012c7.176 0 9.852-5.005 12.348-12.519 2.578-7.735 2.467-15.174 0-25.096-1.774-7.145-5.161-12.521-12.348-12.521h-9.268zM77.809 87.927c2.561 0 4.634 2.097 4.634 4.692 0 2.602-2.074 4.719-4.634 4.719-2.55 0-4.633-2.117-4.633-4.719 0-2.595 2.083-4.692 4.633-4.692z"
19 |         transform="translate(0 10.26)"
20 |       ></path>
21 |     </svg>
22 |   );
23 | }
24 | 


--------------------------------------------------------------------------------
/shush/app/page.tsx:
--------------------------------------------------------------------------------
 1 | import Link from "next/link";
 2 | import { buttonVariants } from "@/components/ui/button";
 3 | import { twMerge } from "tailwind-merge";
 4 | import CodeHost from "@/components/code-host";
 5 | import Footer from "@/components/footer";
 6 | 
 7 | export default function Home() {
 8 |   return (
 9 |     <div className="container flex w-full flex-col items-center gap-12">
10 |       <section className="text-center py-28 max-w-3xl flex flex-col gap-3 items-center">
11 |         <h1 className="pt-24 text-5xl sm:text-6xl tracking-tighter font-semibold">
12 |           Transcribe audio in minutes with WhisperV3
13 |         </h1>
14 |         <Link
15 |           target="_"
16 |           className="bg-gray-100 text-xs sm:text-sm w-fit px-2.5 rounded-xl border-gray-300 border text-gray-600 hover:shadow-lg transition-shadow"
17 |           href={"https://github.com/Vaibhavs10/insanely-fast-whisper"}
18 |         >
19 |           Accelerated by <span className="underline">Flash Attention v2</span> +{" "}
20 |           <span className="underline">Transformers</span>
21 |         </Link>
22 |         <div className="flex gap-4 flex-wrap py-6">
23 |           <Link href="#host" className={twMerge(buttonVariants(), "w-full sm:w-48")}>
24 |             Host it yourself
25 |           </Link>
26 |           <Link href="/tryit" className={twMerge(buttonVariants(), "w-full sm:w-48")}>
27 |             Try it out
28 |           </Link>
29 |         </div>
30 |       </section>
31 |       <section
32 |         className="text-center py-20 sm:py-32 max-w-3xl flex flex-col gap-3 items-center"
33 |         id="host"
34 |       >
35 |         <CodeHost />
36 |       </section>
37 |       <Footer/>
38 |     </div>
39 |   );
40 | }
41 | 


--------------------------------------------------------------------------------
/shush/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Slot } from "@radix-ui/react-slot"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default:
13 |           "bg-primary text-primary-foreground shadow hover:bg-primary/90",
14 |         destructive:
15 |           "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
16 |         outline:
17 |           "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
18 |         secondary:
19 |           "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
20 |         ghost: "hover:bg-accent hover:text-accent-foreground",
21 |         link: "text-primary underline-offset-4 hover:underline",
22 |       },
23 |       size: {
24 |         default: "h-9 px-4 py-2",
25 |         sm: "h-8 rounded-md px-3 text-xs",
26 |         lg: "h-10 rounded-md px-8",
27 |         icon: "h-9 w-9",
28 |       },
29 |     },
30 |     defaultVariants: {
31 |       variant: "default",
32 |       size: "default",
33 |     },
34 |   }
35 | )
36 | 
37 | export interface ButtonProps
38 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
39 |     VariantProps<typeof buttonVariants> {
40 |   asChild?: boolean
41 | }
42 | 
43 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
44 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
45 |     const Comp = asChild ? Slot : "button"
46 |     return (
47 |       <Comp
48 |         className={cn(buttonVariants({ variant, size, className }))}
49 |         ref={ref}
50 |         {...props}
51 |       />
52 |     )
53 |   }
54 | )
55 | Button.displayName = "Button"
56 | 
57 | export { Button, buttonVariants }
58 | 


--------------------------------------------------------------------------------
/shush/components/ui/tabs.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as TabsPrimitive from "@radix-ui/react-tabs"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Tabs = TabsPrimitive.Root
 9 | 
10 | const TabsList = React.forwardRef<
11 |   React.ElementRef<typeof TabsPrimitive.List>,
12 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
13 | >(({ className, ...props }, ref) => (
14 |   <TabsPrimitive.List
15 |     ref={ref}
16 |     className={cn(
17 |       "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
18 |       className
19 |     )}
20 |     {...props}
21 |   />
22 | ))
23 | TabsList.displayName = TabsPrimitive.List.displayName
24 | 
25 | const TabsTrigger = React.forwardRef<
26 |   React.ElementRef<typeof TabsPrimitive.Trigger>,
27 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
28 | >(({ className, ...props }, ref) => (
29 |   <TabsPrimitive.Trigger
30 |     ref={ref}
31 |     className={cn(
32 |       "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
33 |       className
34 |     )}
35 |     {...props}
36 |   />
37 | ))
38 | TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
39 | 
40 | const TabsContent = React.forwardRef<
41 |   React.ElementRef<typeof TabsPrimitive.Content>,
42 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
43 | >(({ className, ...props }, ref) => (
44 |   <TabsPrimitive.Content
45 |     ref={ref}
46 |     className={cn(
47 |       "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
48 |       className
49 |     )}
50 |     {...props}
51 |   />
52 | ))
53 | TabsContent.displayName = TabsPrimitive.Content.displayName
54 | 
55 | export { Tabs, TabsList, TabsTrigger, TabsContent }
56 | 


--------------------------------------------------------------------------------
/shush/app/tryit/page.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { useState, useRef, useEffect } from "react";
 4 | import Waveform from "@/components/waveform";
 5 | import Stats from "@/components/stats";
 6 | import { File, Upload } from "lucide-react";
 7 | import AudioSubmit from "@/components/audio-submit";
 8 | 
 9 | export default function TryIt() {
10 |   const [file, setFile] = useState<File | undefined>();
11 |   const fileInputRef = useRef<HTMLInputElement>(null);
12 | 
13 |   useEffect(() => {
14 |     if (fileInputRef.current) {
15 |       fileInputRef.current.value = "";
16 |     }
17 |   }, [file]);
18 | 
19 |   return (
20 |     <div className="container flex w-full flex-col items-center gap-12">
21 |       <section className="text-center py-28 max-w-3xl flex flex-col gap-3 items-center w-full">
22 |         <div className="text-5xl tracking-tighter font-semibold">
23 |           Upload an mp3 file
24 |         </div>
25 |         {file && (
26 |           <div className="flex flex-col items-center w-full gap-2">
27 |             <h1 className="pt-12 font-semibold w-full">
28 |               <Waveform file={file} />
29 |             </h1>
30 |             <AudioSubmit file={file} setFile={setFile} />
31 |           </div>
32 |         )}
33 |         <div
34 |           onClick={() => fileInputRef.current?.click()}
35 |           className="cursor-pointer justify-center"
36 |         >
37 |           {!file ? (
38 |             <div className="my-5 flex gap-2 items-center px-2.5 py-1.5 rounded-lg border border-dashed border-gray-300 text-gray-600 bg-gray-100 bg-opacity-40">
39 |               <Upload size={20} /> Select a File
40 |             </div>
41 |           ) : (
42 |             <div className="my-5 flex gap-2 items-center px-2.5 py-1.5  rounded-lg border border-dashed border-gray-300 text-gray-600 bg-gray-100 bg-opacity-40">
43 |               <File size={20} /> Change File
44 |             </div>
45 |           )}
46 |           <input
47 |             ref={fileInputRef}
48 |             type="file"
49 |             accept=".mp3"
50 |             style={{ display: "none" }}
51 |             onChange={(e) => setFile(e.target.files?.[0])}
52 |           />
53 |         </div>
54 |       </section>
55 |       <Stats/>
56 |     </div>
57 |   );
58 | }
59 | 


--------------------------------------------------------------------------------
/shush/components/data-viewer.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import React from "react";
 4 | import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 5 | 
 6 | type Props = {
 7 |   data: any;
 8 | };
 9 | 
10 | export default function DataViewer({ data }: Props) {
11 |   return (
12 |     <section className=" flex flex-col gap-3 items-center w-full h-[80vh]">
13 |       <Tabs defaultValue="timestamps" className="w-full h-full">
14 |         <div className="w-full justify-between flex items-center">
15 |           <TabsList>
16 |             <TabsTrigger value="text">Text</TabsTrigger>
17 |             <TabsTrigger value="timestamps">Timestamps</TabsTrigger>
18 |             <TabsTrigger value="json">JSON</TabsTrigger>
19 |           </TabsList>
20 |           <div className="bg-gray-100 text-sm px-2 rounded-lg border-gray-300 border text-gray-600">
21 |           <span className="sm:inline hidden">Finished on a <span className="font-medium">NVIDIA A10G</span> in{" "}</span>
22 |             <span className="font-medium">~{data[1].toFixed(2)}s</span>
23 |           </div>
24 |         </div>
25 |         <TabsContent
26 |           className="bg-gray-100 px-5 py-3 rounded-lg border-gray-300 border text-gray-600 h-fit max-h-[90%] overflow-scroll"
27 |           value="text"
28 |         >
29 |           {data[0].text}
30 |         </TabsContent>
31 |         <TabsContent
32 |           className="bg-gray-100 px-5 rounded-lg border-gray-300 border text-gray-600 h-fit max-h-[90%] overflow-scroll"
33 |           value="timestamps"
34 |         >
35 |           {data[0].chunks.map((chunk: any, index: number) => (
36 |             <div className="border-b py-3" key={index}>
37 |               <p>{chunk.text}</p>
38 |               <p className="text-sm opacity-70">
39 |                 {chunk.timestamp[0]}s - {chunk.timestamp[1]}s
40 |               </p>
41 |             </div>
42 |           ))}
43 |         </TabsContent>
44 |         <TabsContent
45 |           className="bg-gray-100 px-5 py-3 rounded-lg border-gray-300 border text-gray-600 font-mono h-fit max-h-[90%] overflow-scroll"
46 |           value="json"
47 |         >
48 |           <pre>{JSON.stringify(data[0], null, 2)}</pre>
49 |         </TabsContent>
50 |       </Tabs>
51 |     </section>
52 |   );
53 | }
54 | 


--------------------------------------------------------------------------------
/shush/app/tryit/[call_id]/page.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import DataViewer from "@/components/data-viewer";
 4 | import React, { useEffect, useState } from "react";
 5 | import ShareUrl from "@/components/share-url";
 6 | import ReqFail from "./reqFail";
 7 | import ReqProgress from "./reqProgress";
 8 | import Loading from "./loading";
 9 | 
10 | export default function Page({ params }: { params: { call_id: string } }) {
11 |   const [data, setData] = useState<any | undefined>();
12 |   const [status, setStatus] = useState<number>();
13 | 
14 |   useEffect(() => {
15 |     let timeoutId: NodeJS.Timeout;
16 |     const formData = new FormData();
17 |     formData.append("call_id", params.call_id);
18 |     const fetchData = async () => {
19 |       fetch(`${process.env.NEXT_PUBLIC_MODAL_URL}/call_id`, {
20 |         method: "POST",
21 |         body: formData,
22 |       })
23 |         .then((response) => {
24 |           setStatus(response.status);
25 |           if (response.status == 202) {
26 |             timeoutId = setTimeout(fetchData, 10000);
27 |           } else {
28 |             return response.json();
29 |           }
30 |         }).then((data) => {
31 |           setData(data);
32 |         }
33 |         )
34 | 
35 |         .catch((error) => {
36 |           setStatus(500);
37 |           console.error("Error:", error);
38 |         });
39 |     };
40 |     fetchData();
41 |     return () => clearTimeout(timeoutId);
42 |   }, []);
43 | 
44 |   if (status == 202) {
45 |     return <ReqProgress />;
46 |   }
47 | 
48 |   if (status == 500) {
49 |     return <ReqFail />;
50 |   }
51 | 
52 |   if (!data) {
53 |     return <Loading />;
54 |   }
55 | 
56 |   if (data) {
57 |     return (
58 |       <>
59 |         <div className="container flex flex-col items-center gap-4 max-w-3xl">
60 |           <DataViewer data={data} />
61 |           <div className="flex items-center text-lg gap-4 w-full">
62 |             <div className="opacity-70 font-mono text-base font-medium">
63 |               Share
64 |             </div>
65 |             <ShareUrl
66 |               host={
67 |                 window.location.protocol +
68 |                 "//" +
69 |                 window.location.host +
70 |                 "/tryit"
71 |               }
72 |               call_id={params.call_id}
73 |             />
74 |           </div>
75 |         </div>
76 |       </>
77 |     );
78 |   }
79 | }
80 | 


--------------------------------------------------------------------------------
/shush/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   darkMode: ["class"],
 4 |   content: [
 5 |     './pages/**/*.{ts,tsx}',
 6 |     './components/**/*.{ts,tsx}',
 7 |     './app/**/*.{ts,tsx}',
 8 |     './src/**/*.{ts,tsx}',
 9 | 	],
10 |   theme: {
11 |     container: {
12 |       center: true,
13 |       padding: "2rem",
14 |       screens: {
15 |         "2xl": "1400px",
16 |       },
17 |     },
18 |     extend: {
19 |       colors: {
20 |         border: "hsl(var(--border))",
21 |         input: "hsl(var(--input))",
22 |         ring: "hsl(var(--ring))",
23 |         background: "hsl(var(--background))",
24 |         foreground: "hsl(var(--foreground))",
25 |         primary: {
26 |           DEFAULT: "hsl(var(--primary))",
27 |           foreground: "hsl(var(--primary-foreground))",
28 |         },
29 |         secondary: {
30 |           DEFAULT: "hsl(var(--secondary))",
31 |           foreground: "hsl(var(--secondary-foreground))",
32 |         },
33 |         destructive: {
34 |           DEFAULT: "hsl(var(--destructive))",
35 |           foreground: "hsl(var(--destructive-foreground))",
36 |         },
37 |         muted: {
38 |           DEFAULT: "hsl(var(--muted))",
39 |           foreground: "hsl(var(--muted-foreground))",
40 |         },
41 |         accent: {
42 |           DEFAULT: "hsl(var(--accent))",
43 |           foreground: "hsl(var(--accent-foreground))",
44 |         },
45 |         popover: {
46 |           DEFAULT: "hsl(var(--popover))",
47 |           foreground: "hsl(var(--popover-foreground))",
48 |         },
49 |         card: {
50 |           DEFAULT: "hsl(var(--card))",
51 |           foreground: "hsl(var(--card-foreground))",
52 |         },
53 |       },
54 |       borderRadius: {
55 |         lg: "var(--radius)",
56 |         md: "calc(var(--radius) - 2px)",
57 |         sm: "calc(var(--radius) - 4px)",
58 |       },
59 |       keyframes: {
60 |         "accordion-down": {
61 |           from: { height: 0 },
62 |           to: { height: "var(--radix-accordion-content-height)" },
63 |         },
64 |         "accordion-up": {
65 |           from: { height: "var(--radix-accordion-content-height)" },
66 |           to: { height: 0 },
67 |         },
68 |       },
69 |       animation: {
70 |         "accordion-down": "accordion-down 0.2s ease-out",
71 |         "accordion-up": "accordion-up 0.2s ease-out",
72 |       },
73 |     },
74 |   },
75 |   plugins: [require("tailwindcss-animate"), require('@tailwindcss/typography')],
76 | }


--------------------------------------------------------------------------------
/shush/components/navbar.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Ear } from "lucide-react";
 3 | import Link from "next/link";
 4 | 
 5 | type Props = {};
 6 | 
 7 | export default function Navbar({}: Props) {
 8 |   return (
 9 |     <div className="flex w-full items-center p-3 justify-between sticky top-0 backdrop-blur-sm">
10 |       <Link href={"/"} className="flex items-center text-2xl font-semibold tracking-tighter">
11 |         Shush <Ear />
12 |       </Link>
13 |       <Link className="flex items-center gap-2" href={"https://github.com/arihanv/Shush"} target="_">
14 |       <div className="bg-gray-100 text-sm w-fit px-2.5 rounded-xl border-gray-300 border text-gray-600 hover:shadow-lg transition-shadow flex items-center group">
15 |           Get the code{" "}
16 |         </div>
17 |         <svg viewBox="0 0 128 128" height={24}>
18 |             <g fill="#181616"><path fillRule="evenodd" clipRule="evenodd" d="M64 5.103c-33.347 0-60.388 27.035-60.388 60.388 0 26.682 17.303 49.317 41.297 57.303 3.017.56 4.125-1.31 4.125-2.905 0-1.44-.056-6.197-.082-11.243-16.8 3.653-20.345-7.125-20.345-7.125-2.747-6.98-6.705-8.836-6.705-8.836-5.48-3.748.413-3.67.413-3.67 6.063.425 9.257 6.223 9.257 6.223 5.386 9.23 14.127 6.562 17.573 5.02.542-3.903 2.107-6.568 3.834-8.076-13.413-1.525-27.514-6.704-27.514-29.843 0-6.593 2.36-11.98 6.223-16.21-.628-1.52-2.695-7.662.584-15.98 0 0 5.07-1.623 16.61 6.19C53.7 35 58.867 34.327 64 34.304c5.13.023 10.3.694 15.127 2.033 11.526-7.813 16.59-6.19 16.59-6.19 3.287 8.317 1.22 14.46.593 15.98 3.872 4.23 6.215 9.617 6.215 16.21 0 23.194-14.127 28.3-27.574 29.796 2.167 1.874 4.097 5.55 4.097 11.183 0 8.08-.07 14.583-.07 16.572 0 1.607 1.088 3.49 4.148 2.897 23.98-7.994 41.263-30.622 41.263-57.294C124.388 32.14 97.35 5.104 64 5.104z"></path><path d="M26.484 91.806c-.133.3-.605.39-1.035.185-.44-.196-.685-.605-.543-.906.13-.31.603-.395 1.04-.188.44.197.69.61.537.91zm2.446 2.729c-.287.267-.85.143-1.232-.28-.396-.42-.47-.983-.177-1.254.298-.266.844-.14 1.24.28.394.426.472.984.17 1.255zM31.312 98.012c-.37.258-.976.017-1.35-.52-.37-.538-.37-1.183.01-1.44.373-.258.97-.025 1.35.507.368.545.368 1.19-.01 1.452zm3.261 3.361c-.33.365-1.036.267-1.552-.23-.527-.487-.674-1.18-.343-1.544.336-.366 1.045-.264 1.564.23.527.486.686 1.18.333 1.543zm4.5 1.951c-.147.473-.825.688-1.51.486-.683-.207-1.13-.76-.99-1.238.14-.477.823-.7 1.512-.485.683.206 1.13.756.988 1.237zm4.943.361c.017.498-.563.91-1.28.92-.723.017-1.308-.387-1.315-.877 0-.503.568-.91 1.29-.924.717-.013 1.306.387 1.306.88zm4.598-.782c.086.485-.413.984-1.126 1.117-.7.13-1.35-.172-1.44-.653-.086-.498.422-.997 1.122-1.126.714-.123 1.354.17 1.444.663zm0 0"></path></g>
19 |         </svg>
20 |       </Link>
21 |     </div>
22 |   );
23 | }
24 | 


--------------------------------------------------------------------------------
/shush/components/stats.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import React from "react";
 4 | import { Loader2 } from "lucide-react";
 5 | import { useEffect, useState } from "react";
 6 | 
 7 | type ModalStats = {
 8 |   backlog: number;
 9 |   num_active_runners: number;
10 |   num_total_runners: number;
11 | };
12 | 
13 | export default function Stats() {
14 |   const [stats, setStats] = useState<ModalStats | undefined>();
15 |   useEffect(() => {
16 |     let timeoutId: NodeJS.Timeout;
17 |     const fetchData = async () => {
18 |       fetch(`${process.env.NEXT_PUBLIC_MODAL_URL}/stats`, {
19 |         method: "GET",
20 |       })
21 |         .then((response) => response.json())
22 |         .then((data) => {
23 |           setStats(data);
24 |         })
25 |         .catch((error) => {
26 |           console.error("Error:", error);
27 |         })
28 |         .finally(() => {
29 |           timeoutId = setTimeout(fetchData, 2000);
30 |         });
31 |     };
32 |     fetchData();
33 |     return () => clearTimeout(timeoutId);
34 |   }, []);
35 |   return (
36 |     <div className="fixed bottom-0 mb-10 px-10 flex flex-col justify-center gap-2 w-[375px]">
37 |       {stats ? (
38 |         <>
39 |           <div className="flex gap-3 items-center bg-gray-100 px-2.5 rounded-xl border-gray-300 border text-gray-600 justify-around text-opacity-70">
40 |             <div>{stats.backlog} Files in Backlog</div>{" "}
41 |             {stats.num_active_runners == 0 && stats.backlog > 0 ? (
42 |               <div className="flex gap-1">
43 |                 <div className="animate-spin items-center flex">
44 |                   <Loader2 size={15} />
45 |                 </div>
46 |                 <div>Cold Starting</div>
47 |               </div>
48 |             ) : (
49 |               <div>{stats.num_active_runners} Runners Online</div>
50 |             )}
51 |           </div>
52 |           <div className="bg-gray-100 px-2.5 rounded-xl border-gray-300 border text-gray-600">
53 |             <div className="flex gap-3 items-center justify-between border-b py-0.5">
54 |               <div className="opacity-70">GPU</div>{" "}
55 |               <div className="font-medium">A10G</div>
56 |             </div>
57 |             <div className="flex gap-3 items-center justify-between border-b py-0.5">
58 |               <div className="opacity-70">Precision</div>{" "}
59 |               <div className="font-medium">fp16</div>
60 |             </div>
61 |             <div className="flex gap-3 items-center justify-between py-0.5">
62 |               <div className="opacity-70">Optimizer</div>{" "}
63 |               <div className="font-medium">flash-attn 2</div>
64 |             </div>
65 |           </div>
66 |         </>
67 |       ) : (
68 |         <div className="h-[122px] bg-gray-100 px-2.5 rounded-xl border-gray-300 border flex">
69 |           {" "}
70 |           <div className="animate-spin items-center m-auto">
71 |             <Loader2 opacity={0.5} size={30} />
72 |           </div>
73 |         </div>
74 |       )}
75 |     </div>
76 |   );
77 | }
78 | 


--------------------------------------------------------------------------------
/shush/components/audio-submit.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | import { Button, buttonVariants } from "@/components/ui/button";
 3 | import { toast } from "sonner";
 4 | import { twMerge } from "tailwind-merge";
 5 | import {
 6 |   Dialog,
 7 |   DialogContent,
 8 |   DialogDescription,
 9 |   DialogFooter,
10 |   DialogHeader,
11 |   DialogTitle,
12 | } from "@/components/ui/dialog";
13 | import Link from "next/link";
14 | import ShareUrl from "./share-url";
15 | 
16 | type Props = {
17 |   setFile: React.Dispatch<React.SetStateAction<File | undefined>>;
18 |   file: File;
19 | };
20 | 
21 | export default function AudioSubmit({ setFile, file }: Props) {
22 |   const [submitted, setSubmitted] = useState(false);
23 |   const [open, setOpen] = useState(false);
24 |   const [call_id, setCall_id] = useState("");
25 |   async function submitAudio() {
26 |     const formData = new FormData();
27 |     formData.append("audio", file);
28 |     const promise = () =>
29 |       fetch(`${process.env.NEXT_PUBLIC_MODAL_URL}/transcribe`, {
30 |         method: "POST",
31 |         body: formData,
32 |       }).then((response) => response.json());
33 | 
34 |     toast.promise(promise, {
35 |       loading: "Sending Your File to the Server",
36 |       success: (data) => {
37 |         setOpen(true);
38 |         setCall_id(data)
39 |         return "Received Call ID: " + data;
40 |       },
41 |       error: "Failed to send file",
42 |     });
43 |   }
44 | 
45 |   return (
46 |     <>
47 |       <Dialog open={open}>
48 |         <DialogContent>
49 |           <DialogHeader className="text-left">
50 |             <DialogTitle>Successfully Sent File !</DialogTitle>
51 |             <DialogDescription>
52 |               The transcription will be available at this link. You can go there right now or check back later.
53 |               <div className="max-w-[325px] sm:max-w-[450px] w-full">
54 |               <ShareUrl host={window.location.href} call_id={call_id}/>
55 |               </div>
56 |             </DialogDescription>
57 |             <DialogFooter>
58 |                 <div className="flex gap-2 justify-end mt-2">
59 |                 <Link href={`/tryit/${call_id}`} className={twMerge(buttonVariants(), "w-fit")}>
60 |                     Go to the Link
61 |                 </Link>
62 |               <Button
63 |                 className="w-fit"
64 |                 onClick={() => {
65 |                   setFile(undefined);
66 |                   setOpen(false);
67 |                   setSubmitted(false);
68 |                   setCall_id("");
69 |                 }}
70 |               >
71 |                 Upload A New File
72 |               </Button>
73 |               </div>
74 |             </DialogFooter>
75 |           </DialogHeader>
76 |         </DialogContent>
77 |       </Dialog>
78 |       <Button
79 |         disabled={submitted}
80 |         onClick={() => {
81 |           setSubmitted(true), submitAudio();
82 |         }}
83 |       >
84 |         {submitted ? "Sending ..." : "Send It !"}
85 |       </Button>
86 |     </>
87 |   );
88 | }
89 | 


--------------------------------------------------------------------------------
/modal/modal_app.py:
--------------------------------------------------------------------------------
  1 | """
  2 | This is the base modal app that will be used to generate the modal. View the instruction in the README.md
  3 | or visit this website for more information: https://shush.arihanv.com/#host
  4 | """
  5 | 
  6 | from modal import Image, App, method, asgi_app, enter
  7 | from fastapi import Request, FastAPI
  8 | import tempfile
  9 | import time
 10 | 
 11 | MODEL_DIR = "/model"
 12 | 
 13 | web_app = FastAPI()
 14 | 
 15 | 
 16 | def download_model():
 17 |     from huggingface_hub import snapshot_download
 18 | 
 19 |     snapshot_download("openai/whisper-large-v3", local_dir=MODEL_DIR)
 20 | 
 21 | 
 22 | image = (
 23 |     Image.from_registry("nvidia/cuda:12.1.0-cudnn8-devel-ubuntu22.04", add_python="3.9")
 24 |     .apt_install("git", "ffmpeg")
 25 |     .pip_install(
 26 |         "transformers",
 27 |         "ninja",
 28 |         "packaging",
 29 |         "wheel",
 30 |         "torch",
 31 |         "hf-transfer~=0.1",
 32 |         "ffmpeg-python",
 33 |     )
 34 |     .run_commands("python -m pip install flash-attn --no-build-isolation", gpu="A10G")
 35 |     .env({"HF_HUB_ENABLE_HF_TRANSFER": "1"})
 36 |     .run_function(
 37 |         download_model,
 38 |     )
 39 | )
 40 | 
 41 | app = App("whisper-v3-demo", image=image)
 42 | 
 43 | 
 44 | @app.cls(
 45 |     gpu="A10G",
 46 |     allow_concurrent_inputs=80,
 47 |     container_idle_timeout=40,
 48 | )
 49 | class WhisperV3:
 50 |     @enter()
 51 |     def setup(self):
 52 |         import torch
 53 |         from transformers import AutoModelForSpeechSeq2Seq, AutoProcessor, pipeline
 54 | 
 55 |         self.device = "cuda" if torch.cuda.is_available() else "cpu"
 56 |         self.torch_dtype = torch.float16 if torch.cuda.is_available() else torch.float32
 57 |         model = AutoModelForSpeechSeq2Seq.from_pretrained(
 58 |             MODEL_DIR,
 59 |             torch_dtype=self.torch_dtype,
 60 |             use_safetensors=True,
 61 |             use_flash_attention_2=True,
 62 |         )
 63 |         processor = AutoProcessor.from_pretrained(MODEL_DIR)
 64 |         model.to(self.device)
 65 |         self.pipe = pipeline(
 66 |             "automatic-speech-recognition",
 67 |             model=model,
 68 |             tokenizer=processor.tokenizer,
 69 |             feature_extractor=processor.feature_extractor,
 70 |             max_new_tokens=128,
 71 |             chunk_length_s=30,
 72 |             batch_size=24,
 73 |             return_timestamps=True,
 74 |             torch_dtype=self.torch_dtype,
 75 |             model_kwargs={"use_flash_attention_2": True},
 76 |             device=0,
 77 |         )
 78 | 
 79 |     @method()
 80 |     def generate(self, audio: bytes):
 81 |         fp = tempfile.NamedTemporaryFile(delete=False, suffix=".mp3")
 82 |         fp.write(audio)
 83 |         fp.close()
 84 |         start = time.time()
 85 |         output = self.pipe(
 86 |             fp.name, chunk_length_s=30, batch_size=24, return_timestamps=True
 87 |         )
 88 |         elapsed = time.time() - start
 89 |         return output, elapsed
 90 | 
 91 | 
 92 | @app.function()
 93 | @web_app.post("/")
 94 | async def transcribe(request: Request):
 95 |     form = await request.form()
 96 |     audio = await form["audio"].read()
 97 |     output, elapsed = WhisperV3().generate.remote(audio)
 98 |     return output, elapsed
 99 | 
100 | 
101 | @app.function()
102 | @asgi_app()
103 | def entrypoint():
104 |     return web_app
105 | 


--------------------------------------------------------------------------------
/shush/components/ui/codeblock.tsx:
--------------------------------------------------------------------------------
  1 | // @ts-nocheck
  2 | // @see https://github.com/mckaywrigley/chatbot-ui/blob/main/components/Markdown/CodeBlock.tsx
  3 | 
  4 | "use client";
  5 | 
  6 | import { FC, memo } from "react";
  7 | import PythonLogo from "../python-logo";
  8 | import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
  9 | import { coldarkCold } from "react-syntax-highlighter/dist/cjs/styles/prism";
 10 | 
 11 | import { useCopyToClipboard } from "@/lib/hooks/use-copy-to-clipboard";
 12 | 
 13 | import { Check, Copy, Download } from "lucide-react";
 14 | 
 15 | interface Props {
 16 |   language: string;
 17 |   value: string;
 18 |   fileName: string;
 19 | }
 20 | 
 21 | interface languageMap {
 22 |   [key: string]: string | undefined;
 23 | }
 24 | 
 25 | export const programmingLanguages: languageMap = {
 26 |   javascript: ".js",
 27 |   python: ".py",
 28 |   java: ".java",
 29 |   c: ".c",
 30 |   cpp: ".cpp",
 31 |   "c++": ".cpp",
 32 |   "c#": ".cs",
 33 |   ruby: ".rb",
 34 |   php: ".php",
 35 |   swift: ".swift",
 36 |   "objective-c": ".m",
 37 |   kotlin: ".kt",
 38 |   typescript: ".ts",
 39 |   go: ".go",
 40 |   perl: ".pl",
 41 |   rust: ".rs",
 42 |   scala: ".scala",
 43 |   haskell: ".hs",
 44 |   lua: ".lua",
 45 |   shell: ".sh",
 46 |   sql: ".sql",
 47 |   html: ".html",
 48 |   css: ".css",
 49 | };
 50 | 
 51 | const CodeBlock: FC<Props> = memo(({ language, value, fileName }) => {
 52 |   const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2000 });
 53 | 
 54 |   const downloadAsFile = () => {
 55 |     if (typeof window === "undefined") {
 56 |       return;
 57 |     }
 58 | 
 59 |     const blob = new Blob([value], { type: "text/plain" });
 60 |     const url = URL.createObjectURL(blob);
 61 |     const link = document.createElement("a");
 62 |     link.download = fileName;
 63 |     link.href = url;
 64 |     link.style.display = "none";
 65 |     document.body.appendChild(link);
 66 |     link.click();
 67 |     document.body.removeChild(link);
 68 |     URL.revokeObjectURL(url);
 69 |   };
 70 | 
 71 |   const onCopy = () => {
 72 |     if (isCopied) return;
 73 |     copyToClipboard(value);
 74 |   };
 75 | 
 76 |   return (
 77 |     <div className="codeblock relative w-full bg-white font-sans shadow-md rounded-lg">
 78 |       <div className="flex w-full items-center justify-between pr-4 bg-gray-100 rounded-t-lg">
 79 |         <div className="lowercase bg-white h-full flex items-center text-sm p-2 justify-between border-t px-3 gap-2.5 border-t-blue-500">
 80 |           <div className="gap-1 flex">
 81 |             {language == "python" && <PythonLogo height={14} className="mt-[.2rem]" />} {fileName}{" "}
 82 |           </div>{" "}
 83 |           <span className="rounded-full bg-gray-700 h-2 w-2 mt-[.15rem]"></span>
 84 |         </div>
 85 |         <div className="flex items-center gap-1">
 86 |           <button onClick={downloadAsFile}>
 87 |             <Download height={15} />
 88 |             <span className="sr-only">Download</span>
 89 |           </button>
 90 |           <button
 91 |             onClick={onCopy}
 92 |           >
 93 |             {isCopied ? <Check height={15}  /> : <Copy height={15}  />}
 94 |             <span className="sr-only">Copy code</span>
 95 |           </button>
 96 |         </div>
 97 |       </div>
 98 |       <SyntaxHighlighter
 99 |         language={language}
100 |         style={coldarkCold}
101 |         PreTag="div"
102 |         customStyle={{
103 |           margin: 0,
104 |           width: "100%",
105 |           background: "transparent",
106 |           lineHeight: "1.2",
107 |         }}
108 |         codeTagProps={{
109 |           style: {
110 |             lineHeight: "inherit",
111 |             fontSize: "0.85em",
112 |             fontFamily: "var(--font-mono)",
113 |           },
114 |         }}
115 |       >
116 |         {value}
117 |       </SyntaxHighlighter>
118 |     </div>
119 |   );
120 | });
121 | CodeBlock.displayName = "CodeBlock";
122 | 
123 | export { CodeBlock };
124 | 


--------------------------------------------------------------------------------
/modal/shush.py:
--------------------------------------------------------------------------------
  1 | from modal import (
  2 |     Image,
  3 |     App,
  4 |     method,
  5 |     asgi_app,
  6 |     functions,
  7 |     enter,
  8 | )
  9 | from fastapi import Request, FastAPI, responses
 10 | from fastapi.middleware.cors import CORSMiddleware
 11 | import tempfile
 12 | 
 13 | MODEL_DIR = "/model"
 14 | 
 15 | web_app = FastAPI()
 16 | 
 17 | web_app.add_middleware(
 18 |     CORSMiddleware,
 19 |     allow_origins=["*"],
 20 |     allow_credentials=True,
 21 |     allow_methods=["*"],
 22 |     allow_headers=["*"],
 23 | )
 24 | 
 25 | 
 26 | def download_model():
 27 |     from huggingface_hub import snapshot_download
 28 | 
 29 |     snapshot_download("openai/whisper-large-v3", local_dir=MODEL_DIR)
 30 | 
 31 | 
 32 | image = (
 33 |     Image.from_registry("nvidia/cuda:12.1.0-cudnn8-devel-ubuntu22.04", add_python="3.9")
 34 |     .apt_install("git", "ffmpeg")
 35 |     .pip_install(
 36 |         "transformers",
 37 |         "ninja",
 38 |         "packaging",
 39 |         "wheel",
 40 |         "torch",
 41 |         "hf-transfer~=0.1",
 42 |         "ffmpeg-python",
 43 |     )
 44 |     .run_commands("python -m pip install flash-attn --no-build-isolation", gpu="A10G")
 45 |     .env({"HF_HUB_ENABLE_HF_TRANSFER": "1"})
 46 |     .run_function(
 47 |         download_model,
 48 |     )
 49 | )
 50 | 
 51 | app = App("whisper-v3")
 52 | 
 53 | 
 54 | @app.cls(
 55 |     image=image,
 56 |     gpu="A10G",
 57 |     allow_concurrent_inputs=80,
 58 |     container_idle_timeout=40,
 59 | )
 60 | class WhisperV3:
 61 |     @enter()
 62 |     def setup(self):
 63 |         import torch
 64 |         from transformers import AutoModelForSpeechSeq2Seq, AutoProcessor, pipeline
 65 | 
 66 |         self.device = "cuda" if torch.cuda.is_available() else "cpu"
 67 |         self.torch_dtype = torch.float16 if torch.cuda.is_available() else torch.float32
 68 |         model = AutoModelForSpeechSeq2Seq.from_pretrained(
 69 |             MODEL_DIR,
 70 |             torch_dtype=self.torch_dtype,
 71 |             use_safetensors=True,
 72 |             use_flash_attention_2=True,
 73 |         )
 74 |         processor = AutoProcessor.from_pretrained(MODEL_DIR)
 75 |         model.to(self.device)
 76 |         self.pipe = pipeline(
 77 |             "automatic-speech-recognition",
 78 |             model=model,
 79 |             tokenizer=processor.tokenizer,
 80 |             feature_extractor=processor.feature_extractor,
 81 |             max_new_tokens=128,
 82 |             chunk_length_s=30,
 83 |             batch_size=24,
 84 |             return_timestamps=True,
 85 |             torch_dtype=self.torch_dtype,
 86 |             model_kwargs={"use_flash_attention_2": True},
 87 |             device=0,
 88 |         )
 89 | 
 90 |     @method()
 91 |     def generate(self, audio: bytes):
 92 |         import time
 93 | 
 94 |         fp = tempfile.NamedTemporaryFile(delete=False, suffix=".mp3")
 95 |         fp.write(audio)
 96 |         fp.close()
 97 |         start = time.time()
 98 |         output = self.pipe(
 99 |             fp.name, chunk_length_s=30, batch_size=24, return_timestamps=True
100 |         )
101 |         elapsed = time.time() - start
102 |         return output, elapsed
103 | 
104 | 
105 | @web_app.post("/transcribe")
106 | async def transcribe(request: Request):
107 |     print("Received a request from", request.client)
108 |     form = await request.form()
109 |     file_content = await form["audio"].read()
110 |     model = WhisperV3()
111 |     call = model.generate.spawn(file_content)
112 |     return call.object_id
113 | 
114 | 
115 | @web_app.get("/stats")
116 | def stats(request: Request):
117 |     print("Received a request from", request.client)
118 |     model = WhisperV3()
119 |     f = model.generate
120 |     return f.get_current_stats()
121 | 
122 | 
123 | @web_app.post("/call_id")
124 | async def get_completion(request: Request):
125 |     form = await request.form()
126 |     call_id = form["call_id"]
127 |     f = functions.FunctionCall.from_id(call_id)
128 |     try:
129 |         result = f.get(timeout=0)
130 |     except TimeoutError:
131 |         return responses.JSONResponse(
132 |             content="Result did not finish processing.", status_code=202
133 |         )
134 |     return result
135 | 
136 | 
137 | @app.function(allow_concurrent_inputs=4)
138 | @asgi_app()
139 | def entrypoint():
140 |     return web_app
141 | 


--------------------------------------------------------------------------------
/shush/components/waveform.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useRef, useState } from "react";
  2 | import WaveSurfer from "wavesurfer.js";
  3 | import { Loader2, Pause, Play } from "lucide-react";
  4 | import { clsx } from "clsx";
  5 | 
  6 | type Props = {
  7 |   file: File;
  8 | };
  9 | 
 10 | type TrackMetadata = {
 11 |   duration: number;
 12 |   name: string;
 13 |   size: number;
 14 | };
 15 | 
 16 | const Waveform = ({ file }: Props) => {
 17 |   const waveform = useRef<HTMLDivElement | null>(null);
 18 |   const track = useRef<WaveSurfer | null>(null);
 19 |   const [mounted, setMounted] = useState(false);
 20 |   const [metadata, setMetadata] = useState<TrackMetadata>({
 21 |     duration: 0,
 22 |     name: "",
 23 |     size: 0,
 24 |   });
 25 |   const [currentTime, setCurrentTime] = useState(0);
 26 |   const [play, setPlay] = useState(false);
 27 | 
 28 |   useEffect(() => {
 29 |     if (waveform.current) {
 30 |       track.current = WaveSurfer.create({
 31 |         container: waveform.current,
 32 |         waveColor: "rgb(74 222 128)",
 33 |         progressColor: "#f3f4f6",
 34 |         url: URL.createObjectURL(file),
 35 |         barGap: 1,
 36 |         barWidth: 3,
 37 |         barRadius: 3,
 38 |         cursorColor: "rgb(75 85 99)",
 39 |         cursorWidth: 3,
 40 |       });
 41 |       track.current.on("ready", () => {
 42 |         setMounted(true);
 43 |         setMetadata((metadata) => {
 44 |           metadata.duration = track.current?.getDuration() || 0;
 45 |           metadata.name = file.name;
 46 |           metadata.size = file.size;
 47 |           return metadata;
 48 |         });
 49 |       });
 50 |       track.current.on("finish", () => {
 51 |         setPlay(false);
 52 |       });
 53 | 
 54 |       return () => {
 55 |         if (track.current) {
 56 |           track.current.destroy();
 57 |           setMounted(false);
 58 |         }
 59 |       };
 60 |     }
 61 |   }, [file]);
 62 | 
 63 |   useEffect(() => {
 64 |     if (track.current) {
 65 |       track.current.on("interaction", () => {
 66 |         setCurrentTime(track.current?.getCurrentTime() || 0);
 67 |       });
 68 |     }
 69 |   }, [track.current]);
 70 | 
 71 |   useEffect(() => {
 72 |     const intervalId = setInterval(() => {
 73 |       if (track.current && track.current.isPlaying()) {
 74 |         setCurrentTime(track.current.getCurrentTime());
 75 |       }
 76 |     }, 100);
 77 |     return () => clearInterval(intervalId);
 78 |   }, []);
 79 | 
 80 |   return (
 81 |     <>
 82 |       <div className="flex justify-center h-48">
 83 |         <div
 84 |           className={clsx(
 85 |             "h-36 bg-gray-100 flex items-center justify-center w-full rounded-lg",
 86 |             !mounted ? "block" : "hidden"
 87 |           )}
 88 |         >
 89 |           <div className="animate-spin items-center m-auto">
 90 |             <Loader2 opacity={0.5} size={30} />
 91 |           </div>
 92 |         </div>
 93 |         <div
 94 |           className={clsx(
 95 |             "flex flex-col w-full gap-2 text-gray-600",
 96 |             mounted ? "block" : "hidden"
 97 |           )}
 98 |         >
 99 |           <div className="justify-between flex font-mono tracking-tight text-sm text-opacity-70 w-full gap-24">
100 |             <div className="text-ellipsis overflow-hidden w-fit whitespace-nowrap">{file.name}</div>
101 |             <div className="whitespace-nowrap w-fit">{(metadata.size / 1000).toFixed(2)} kb</div>
102 |           </div>
103 |           <div className="w-full" ref={waveform} id="waveform"></div>
104 |           <div className="justify-between flex font-mono tracking-tight text-sm text-opacity-70 items-center">
105 |             <div className="tabular-nums w-2/5 text-left">
106 |               {currentTime.toFixed(2)}s
107 |             </div>
108 |             <button onClick={() => {track.current?.playPause(), setPlay(!play)}}>
109 |               {play ? (
110 |                 <Pause fill="black" size={15} />
111 |               ) : (
112 |                 <Play fill="black" size={15} />
113 |               )}
114 |             </button>
115 |             <div className="tabular-nums w-2/5 text-right">
116 |               {metadata.duration.toFixed(2)}s
117 |             </div>
118 |           </div>
119 |         </div>
120 |       </div>
121 |     </>
122 |   );
123 | };
124 | 
125 | export default Waveform;
126 | 


--------------------------------------------------------------------------------
/shush/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as DialogPrimitive from "@radix-ui/react-dialog"
  5 | import { Cross2Icon } from "@radix-ui/react-icons"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | 
  9 | const Dialog = DialogPrimitive.Root
 10 | 
 11 | const DialogTrigger = DialogPrimitive.Trigger
 12 | 
 13 | const DialogPortal = DialogPrimitive.Portal
 14 | 
 15 | const DialogClose = DialogPrimitive.Close
 16 | 
 17 | const DialogOverlay = React.forwardRef<
 18 |   React.ElementRef<typeof DialogPrimitive.Overlay>,
 19 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 20 | >(({ className, ...props }, ref) => (
 21 |   <DialogPrimitive.Overlay
 22 |     ref={ref}
 23 |     className={cn(
 24 |       "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 25 |       className
 26 |     )}
 27 |     {...props}
 28 |   />
 29 | ))
 30 | DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 31 | 
 32 | const DialogContent = React.forwardRef<
 33 |   React.ElementRef<typeof DialogPrimitive.Content>,
 34 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
 35 | >(({ className, children, ...props }, ref) => (
 36 |   <DialogPortal>
 37 |     <DialogOverlay />
 38 |     <DialogPrimitive.Content
 39 |       ref={ref}
 40 |       className={cn(
 41 |         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
 42 |         className
 43 |       )}
 44 |       {...props}
 45 |     >
 46 |       {children}
 47 |       <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
 48 |         <Cross2Icon className="h-4 w-4" />
 49 |         <span className="sr-only">Close</span>
 50 |       </DialogPrimitive.Close>
 51 |     </DialogPrimitive.Content>
 52 |   </DialogPortal>
 53 | ))
 54 | DialogContent.displayName = DialogPrimitive.Content.displayName
 55 | 
 56 | const DialogHeader = ({
 57 |   className,
 58 |   ...props
 59 | }: React.HTMLAttributes<HTMLDivElement>) => (
 60 |   <div
 61 |     className={cn(
 62 |       "flex flex-col space-y-1.5 text-center sm:text-left",
 63 |       className
 64 |     )}
 65 |     {...props}
 66 |   />
 67 | )
 68 | DialogHeader.displayName = "DialogHeader"
 69 | 
 70 | const DialogFooter = ({
 71 |   className,
 72 |   ...props
 73 | }: React.HTMLAttributes<HTMLDivElement>) => (
 74 |   <div
 75 |     className={cn(
 76 |       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
 77 |       className
 78 |     )}
 79 |     {...props}
 80 |   />
 81 | )
 82 | DialogFooter.displayName = "DialogFooter"
 83 | 
 84 | const DialogTitle = React.forwardRef<
 85 |   React.ElementRef<typeof DialogPrimitive.Title>,
 86 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
 87 | >(({ className, ...props }, ref) => (
 88 |   <DialogPrimitive.Title
 89 |     ref={ref}
 90 |     className={cn(
 91 |       "text-lg font-semibold leading-none tracking-tight",
 92 |       className
 93 |     )}
 94 |     {...props}
 95 |   />
 96 | ))
 97 | DialogTitle.displayName = DialogPrimitive.Title.displayName
 98 | 
 99 | const DialogDescription = React.forwardRef<
100 |   React.ElementRef<typeof DialogPrimitive.Description>,
101 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
102 | >(({ className, ...props }, ref) => (
103 |   <DialogPrimitive.Description
104 |     ref={ref}
105 |     className={cn("text-sm text-muted-foreground", className)}
106 |     {...props}
107 |   />
108 | ))
109 | DialogDescription.displayName = DialogPrimitive.Description.displayName
110 | 
111 | export {
112 |   Dialog,
113 |   DialogPortal,
114 |   DialogOverlay,
115 |   DialogTrigger,
116 |   DialogClose,
117 |   DialogContent,
118 |   DialogHeader,
119 |   DialogFooter,
120 |   DialogTitle,
121 |   DialogDescription,
122 | }
123 | 


--------------------------------------------------------------------------------
/shush/components/code-host.tsx:
--------------------------------------------------------------------------------
  1 | import { CodeBlock } from "./ui/codeblock";
  2 | import Link from "next/link";
  3 | 
  4 | import React from "react";
  5 | import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
  6 | // import Markdown from "./markdown";
  7 | 
  8 | export default function CodeHost() {
  9 |   return (
 10 |     <div>
 11 |       <Tabs defaultValue="modal" className="w-screen xl:w-[600px] min-h-[500px]">
 12 |         <TabsList className="grid w-full grid-cols-2">
 13 |           <TabsTrigger value="modal">Deploy on Modal</TabsTrigger>
 14 |           <TabsTrigger value="local">Run Locally</TabsTrigger>
 15 |         </TabsList>
 16 |         <TabsContent value="modal" className="w-full text-start">
 17 |           <div className="prose prose-p:tracking-tight prose-p:m-2">
 18 |             <p>
 19 |               One of the easiest and cheapest way to host an on-demand API is
 20 |               via{" "}
 21 |               <Link
 22 |                 className="text-green-600"
 23 |                 target="_"
 24 |                 href="https://www.modal.com/"
 25 |               >
 26 |                 Modal
 27 |               </Link>
 28 |               .
 29 |             </p>
 30 |             <p>
 31 |               Once you create a free account and download the Python client,
 32 |               copy or download the base code below. It's on github too:{" "}
 33 |               <Link
 34 |                 className="text-green-600"
 35 |                 target="_"
 36 |                 href="https://github.com/arihanv/Shush/blob/main/modal/modal_app.py"
 37 |               >
 38 |                 Code
 39 |               </Link>
 40 |             </p>
 41 |           </div>
 42 |           <div className="max-w-lg sm:max-w-2xl mx-auto">
 43 |             <div className="w-full py-6">
 44 |               <CodeBlock
 45 |                 fileName="modal_app.py"
 46 |                 language="python"
 47 |                 value={`from modal import Image, Stub, method, NetworkFileSystem, asgi_app
 48 | from fastapi import Request, FastAPI
 49 | import tempfile
 50 | import time
 51 | 
 52 | MODEL_DIR = "/model"
 53 | 
 54 | web_app = FastAPI()
 55 | 
 56 | def download_model():
 57 |     from huggingface_hub import snapshot_download
 58 |     snapshot_download("openai/whisper-large-v3", local_dir=MODEL_DIR)
 59 | 
 60 | 
 61 | image = (
 62 |     Image.from_registry("nvidia/cuda:12.1.0-cudnn8-devel-ubuntu22.04", add_python="3.9")
 63 |     .apt_install("git","ffmpeg")
 64 |     .pip_install(
 65 |         "transformers",
 66 |         "ninja",
 67 |         "packaging",
 68 |         "wheel",
 69 |           "torch",
 70 |         "hf-transfer~=0.1",
 71 |         "ffmpeg-python",
 72 |     ).run_commands("python -m pip install flash-attn --no-build-isolation", gpu="A10G")
 73 |     .env({"HF_HUB_ENABLE_HF_TRANSFER": "1"})
 74 |     .run_function(
 75 |         download_model,
 76 |     )
 77 | )
 78 | 
 79 | stub = Stub("whisper-v3-demo", image=image)
 80 | stub.net_file_system = NetworkFileSystem.new()
 81 | 
 82 | @stub.cls(
 83 |     gpu="A10G",
 84 |     allow_concurrent_inputs=80,
 85 |     container_idle_timeout=40,
 86 |     network_file_systems={"/audio_files": stub.net_file_system},
 87 | )
 88 | class WhisperV3:
 89 |     def __enter__(self):
 90 |         import torch
 91 |         from transformers import AutoModelForSpeechSeq2Seq, AutoProcessor, pipeline
 92 |         self.device = "cuda:0" if torch.cuda.is_available() else "cpu"
 93 |         self.torch_dtype = torch.float16 if torch.cuda.is_available() else torch.float32
 94 |         model = AutoModelForSpeechSeq2Seq.from_pretrained(
 95 |             MODEL_DIR,
 96 |             torch_dtype=self.torch_dtype,
 97 |             use_safetensors=True,
 98 |             use_flash_attention_2=True,
 99 |         )
100 |         processor = AutoProcessor.from_pretrained(MODEL_DIR)
101 |         model.to(self.device)
102 |         self.pipe = pipeline(
103 |             "automatic-speech-recognition",
104 |             model=model,
105 |             tokenizer=processor.tokenizer,
106 |             feature_extractor=processor.feature_extractor,
107 |             max_new_tokens=128,
108 |             chunk_length_s=30,
109 |             batch_size=24,
110 |             return_timestamps=True,
111 |             torch_dtype=self.torch_dtype,
112 |             model_kwargs={"use_flash_attention_2": True},
113 |             device=0,
114 |         )
115 | 
116 |     @method()
117 |     def generate(self, audio: bytes):
118 |         fp = tempfile.NamedTemporaryFile(delete=False, suffix=".mp3")
119 |         fp.write(audio)
120 |         fp.close()
121 |         start = time.time()
122 |         output = self.pipe(
123 |             fp.name, chunk_length_s=30, batch_size=24, return_timestamps=True
124 |         )
125 |         elapsed = time.time() - start
126 |         return output, elapsed
127 | 
128 | @stub.function()
129 | @web_app.post("/")
130 | async def transcribe(request: Request):
131 |     form = await request.form()
132 |     audio = await form["audio"].read()
133 |     output, elapsed= WhisperV3().generate.remote(audio)
134 |     return output, elapsed
135 | 
136 | @stub.function()
137 | @asgi_app()
138 | def entrypoint():
139 |     return web_app`}
140 |               />
141 |             </div>
142 |           </div>
143 |           <div className="prose prose-p:tracking-tight mb-6">
144 |             <p>
145 |               After authenticating with the Modal CLI, run this in your
146 |               terminal:
147 |             </p>
148 |             <pre className="bg-gray-100 text-black border-gray-300 border-2">
149 |               <code>
150 |                 <span className="select-none pr-3">$</span>
151 |                 {"modal deploy modal_app.py"}
152 |               </code>
153 |             </pre>
154 |           </div>
155 |           <div className="prose prose-p:tracking-tight">
156 |             <p>{`Now you can make requests! Remember to fill in the missing info:`}</p>
157 |             <pre className="bg-gray-100 text-black border-gray-300 border-2">
158 |               <code>
159 |                 <span className="select-none pr-3">$</span>
160 |                 {`curl -X POST -F "audio=@<file>" https://<org_name>--whisper-v3-demo-entrypoint.modal.run`}
161 |               </code>
162 |             </pre>
163 |           </div>
164 |         </TabsContent>
165 |         <TabsContent value="local" className="w-full text-start">
166 |           <div className="prose prose-p:tracking-tight">
167 |             <p>
168 |               Run WhisperV3 easily with <Link
169 |                 className="text-orange-600"
170 |                 target="_"
171 |                 href="https://github.com/Vaibhavs10/insanely-fast-whisper"
172 |               >
173 |                 Insanely Fast Whisper
174 |               </Link>
175 |               .
176 |             </p>
177 |             <p>
178 |               Install <code>insanely-fast-whisper</code> with <code>pipx</code>
179 |             </p>
180 |             <pre className="bg-gray-100 text-black border-gray-300 border-2">
181 |               <code>
182 |                 <span className="select-none pr-3">$</span>pipx install
183 |                 insanely-fast-whisper
184 |               </code>
185 |             </pre>
186 |             <p>
187 |               Run inference with <code>flash attention v2</code>. Requires
188 |               Amphere GPUs (A10G, A100, etc.) View the full requirements at the
189 |               pypi page:{" "}
190 |               <Link
191 |                 className="text-blue-600"
192 |                 target="_"
193 |                 href="https://pypi.org/project/flash-attn/"
194 |               >
195 |                 flash-attn
196 |               </Link>
197 |             </p>
198 |             <pre className="bg-gray-100 text-black border-gray-300 border-2">
199 |               <code>
200 |                 <span className="select-none pr-3">$</span>
201 |                 {
202 |                   "insanely-fast-whisper --file-name <filename or URL> --flash True"
203 |                 }
204 |               </code>
205 |             </pre>
206 |             <p>
207 |               If you don't have an Amphere GPU, you can still run WhisperV3
208 |               without flash attention.
209 |             </p>
210 |             <pre className="bg-gray-100 text-black border-gray-300 border-2">
211 |               <code>
212 |                 <span className="select-none pr-3">$</span>
213 |                 {"insanely-fast-whisper --file-name <filename or URL>"}
214 |               </code>
215 |             </pre>
216 |           </div>
217 |         </TabsContent>
218 |       </Tabs>
219 |     </div>
220 |   );
221 | }
222 | 


--------------------------------------------------------------------------------