├── .github
    └── ISSUE_TEMPLATE
    │   ├── bug_report.md
    │   └── feature_request.md
├── .gitignore
├── LICENSE
├── README.md
└── magic-text
    ├── .eslintrc.json
    ├── .gitignore
    ├── .vscode
        └── settings.json
    ├── components.json
    ├── next.config.js
    ├── package-lock.json
    ├── package.json
    ├── postcss.config.js
    ├── prisma
        └── schema.prisma
    ├── public
        ├── favicon.ico
        ├── vercel.svg
        ├── welcome.png
        └── youtube.png
    ├── src
        ├── app
        │   ├── api
        │   │   └── citations
        │   │   │   └── route.tsx
        │   ├── citations
        │   │   ├── components
        │   │   │   └── CitationDisplay.tsx
        │   │   ├── layout.tsx
        │   │   └── page.tsx
        │   ├── components
        │   │   ├── Footer.tsx
        │   │   ├── Header.tsx
        │   │   ├── Hero.tsx
        │   │   ├── MagicLinks.tsx
        │   │   ├── links.tsx
        │   │   └── ui
        │   │   │   └── tabs.tsx
        │   ├── data
        │   │   ├── components
        │   │   │   └── Divider.tsx
        │   │   ├── layout.tsx
        │   │   ├── page.tsx
        │   │   └── prompt.tsx
        │   ├── demo
        │   │   ├── components
        │   │   │   ├── Notification.tsx
        │   │   │   ├── TitleCard.tsx
        │   │   │   └── analytics.tsx
        │   │   ├── div
        │   │   │   ├── head.tsx
        │   │   │   ├── page.tsx
        │   │   │   └── prompt.tsx
        │   │   ├── layout.tsx
        │   │   ├── sql
        │   │   │   ├── head.tsx
        │   │   │   ├── page.tsx
        │   │   │   └── prompt.tsx
        │   │   ├── survey
        │   │   │   ├── head.tsx
        │   │   │   ├── page.tsx
        │   │   │   └── prompt.tsx
        │   │   ├── text
        │   │   │   ├── components.tsx
        │   │   │   ├── head.tsx
        │   │   │   ├── page.tsx
        │   │   │   └── prompt.tsx
        │   │   └── youtube
        │   │   │   ├── head.tsx
        │   │   │   ├── page.tsx
        │   │   │   ├── utils.ts
        │   │   │   └── youtube.tsx
        │   ├── globals.css
        │   ├── layout.tsx
        │   ├── page.tsx
        │   ├── text
        │   │   ├── components.tsx
        │   │   ├── page.tsx
        │   │   └── prompt.tsx
        │   └── youtube
        │   │   ├── components
        │   │       ├── Divider.tsx
        │   │       └── Youtube.tsx
        │   │   ├── layout.tsx
        │   │   ├── page.tsx
        │   │   └── utils.ts
        ├── lib
        │   └── utils.ts
        └── pages
        │   └── api
        │       ├── cached_summary.ts
        │       ├── generate.ts
        │       ├── shorten.ts
        │       └── summary.ts
    ├── tailwind.config.js
    └── tsconfig.json


/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug report
 3 | about: Create a report to help us improve
 4 | title: ''
 5 | labels: ''
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | **Describe the bug**
11 | A clear and concise description of what the bug is.
12 | 
13 | **To Reproduce**
14 | Steps to reproduce the behavior:
15 | 1. Go to '...'
16 | 2. Click on '....'
17 | 3. Scroll down to '....'
18 | 4. See error
19 | 
20 | **Expected behavior**
21 | A clear and concise description of what you expected to happen.
22 | 
23 | **Screenshots**
24 | If applicable, add screenshots to help explain your problem.
25 | 
26 | **Desktop (please complete the following information):**
27 |  - OS: [e.g. iOS]
28 |  - Browser [e.g. chrome, safari]
29 |  - Version [e.g. 22]
30 | 
31 | **Smartphone (please complete the following information):**
32 |  - Device: [e.g. iPhone6]
33 |  - OS: [e.g. iOS8.1]
34 |  - Browser [e.g. stock browser, safari]
35 |  - Version [e.g. 22]
36 | 
37 | **Additional context**
38 | Add any other context about the problem here.
39 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Feature request
 3 | about: Suggest an idea for this project
 4 | title: ''
 5 | labels: ''
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | **Is your feature request related to a problem? Please describe.**
11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
12 | 
13 | **Describe the solution you'd like**
14 | A clear and concise description of what you want to happen.
15 | 
16 | **Describe alternatives you've considered**
17 | A clear and concise description of any alternative solutions or features you've considered.
18 | 
19 | **Additional context**
20 | Add any other context or screenshots about the feature request here.
21 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
  1 | # Logs
  2 | logs
  3 | *.log
  4 | npm-debug.log*
  5 | yarn-debug.log*
  6 | yarn-error.log*
  7 | lerna-debug.log*
  8 | 
  9 | # Diagnostic reports (https://nodejs.org/api/report.html)
 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 11 | 
 12 | # Runtime data
 13 | pids
 14 | *.pid
 15 | *.seed
 16 | *.pid.lock
 17 | 
 18 | # Directory for instrumented libs generated by jscoverage/JSCover
 19 | lib-cov
 20 | 
 21 | # Coverage directory used by tools like istanbul
 22 | coverage
 23 | *.lcov
 24 | 
 25 | # nyc test coverage
 26 | .nyc_output
 27 | 
 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 29 | .grunt
 30 | 
 31 | # Bower dependency directory (https://bower.io/)
 32 | bower_components
 33 | 
 34 | # node-waf configuration
 35 | .lock-wscript
 36 | 
 37 | # Compiled binary addons (https://nodejs.org/api/addons.html)
 38 | build/Release
 39 | 
 40 | # Dependency directories
 41 | node_modules/
 42 | jspm_packages/
 43 | 
 44 | # TypeScript v1 declaration files
 45 | typings/
 46 | 
 47 | # TypeScript cache
 48 | *.tsbuildinfo
 49 | 
 50 | # Optional npm cache directory
 51 | .npm
 52 | 
 53 | # Optional eslint cache
 54 | .eslintcache
 55 | 
 56 | # Microbundle cache
 57 | .rpt2_cache/
 58 | .rts2_cache_cjs/
 59 | .rts2_cache_es/
 60 | .rts2_cache_umd/
 61 | 
 62 | # Optional REPL history
 63 | .node_repl_history
 64 | 
 65 | # Output of 'npm pack'
 66 | *.tgz
 67 | 
 68 | # Yarn Integrity file
 69 | .yarn-integrity
 70 | 
 71 | # dotenv environment variables file
 72 | .env
 73 | .env.test
 74 | 
 75 | # parcel-bundler cache (https://parceljs.org/)
 76 | .cache
 77 | 
 78 | # Next.js build output
 79 | .next
 80 | 
 81 | # Nuxt.js build / generate output
 82 | .nuxt
 83 | dist
 84 | 
 85 | # Gatsby files
 86 | .cache/
 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js
 88 | # https://nextjs.org/blog/next-9-1#public-directory-support
 89 | # public
 90 | 
 91 | # vuepress build output
 92 | .vuepress/dist
 93 | 
 94 | # Serverless directories
 95 | .serverless/
 96 | 
 97 | # FuseBox cache
 98 | .fusebox/
 99 | 
100 | # DynamoDB Local files
101 | .dynamodb/
102 | 
103 | # TernJS port file
104 | .tern-port
105 | .vercel
106 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Jason Liu
 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 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # [Magic](http://magic.jxnl.co/)
 2 | 
 3 | Magic is a showcase of the AI tools I've been playing with. I've made the source code available on Github under jxnl/magic-text
 4 | 
 5 | I'm using this project as an opportunity to learn and grow as a machine learning engineer, by building in public. I'm diving into React/NextJS while tackling some low hanging fruit, and I have big plans for what's to come. My goal with Magic is to inspire others to explore the possibilities of the OpenAI API and to show that with a little creativity, the sky's the limit.
 6 | 
 7 | ## [Magic Text](https://magic.jxnl.co/demo/text)
 8 | 
 9 | Simply highlight any text in the text area, and you'll be able to see the brush options in real time. No need to wait for any loading spinners, as Magic will immediately begin rewriting your selection to your specifications.
10 | 
11 | ## [Magic Youtube](https://magic.jxnl.co/demo/youtube)
12 | 
13 | Input a youtube video url and get a summary in markdown format. If it does not have a transcript, it will use whisper but it may be less accurate than the transcript and will take longer to generate.
14 | 
15 | ## [Magic SQL](https://magic.jxnl.co/demo/sql)
16 | 
17 | Use the default schema or add your own and ask questions in plain english and let Magic SQL do its best to explain the answer. You can also Magic to add tables or columns and the schema will automatically update.
18 | 
19 | ## [Magic Div](https://magic.jxnl.co/demo/div)
20 | 
21 | Magic Div is a simple tool to help you create HTML divs. You can use natrual language to describe the content and Magic will do its best to create the layout you're looking for using tailwindcss.
22 | 
23 | ## [Magic Survey](https://magic.jxnl.co/demo/survey)
24 | 
25 | Magic survey takes a json schema and defines conversational agent that helps users and complete survery and sets the data into a object in the browser.
26 | 
27 | # Development 
28 | 
29 | 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).
30 | 
31 | ## Getting Started
32 | 
33 | First, run the development server:
34 | 
35 | ```bash
36 | npm run dev
37 | # or
38 | yarn dev
39 | # or
40 | pnpm dev
41 | ```
42 | 
43 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
44 | 
45 | ## Learn More
46 | 
47 | To learn more about Next.js, take a look at the following resources:
48 | 
49 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
50 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
51 | 
52 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
53 | 
54 | ## Deploy on Vercel
55 | 
56 | 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.
57 | 
58 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
59 | 


--------------------------------------------------------------------------------
/magic-text/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/magic-text/.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 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.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 | 


--------------------------------------------------------------------------------
/magic-text/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "typescript.tsdk": "node_modules/typescript/lib",
3 |   "typescript.enablePromptUseWorkspaceTsdk": true
4 | }


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


--------------------------------------------------------------------------------
/magic-text/next.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | const nextConfig = {
 3 |   experimental: {
 4 |     appDir: true,
 5 |   },
 6 |   async redirects() {
 7 |     return [
 8 |       {
 9 |         source: "/youtube",
10 |         destination: "https://youtubechapters.app/",
11 |         permanent: true,
12 |       },
13 |     ];
14 |   },
15 | };
16 | 
17 | module.exports = nextConfig;
18 | 


--------------------------------------------------------------------------------
/magic-text/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "magic-text",
 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 |     "postinstall": "prisma generate"
11 |   },
12 |   "dependencies": {
13 |     "@headlessui/react": "^1.7.13",
14 |     "@heroicons/react": "^2.0.16",
15 |     "@next/font": "13.1.6",
16 |     "@prisma/client": "^4.10.1",
17 |     "@radix-ui/react-slot": "^1.0.2",
18 |     "@radix-ui/react-tabs": "^1.0.4",
19 |     "@tailwindcss/forms": "^0.5.3",
20 |     "@types/node": "18.11.18",
21 |     "@types/react": "18.0.27",
22 |     "@types/react-dom": "18.0.10",
23 |     "@vercel/analytics": "^0.1.10",
24 |     "class-variance-authority": "^0.7.0",
25 |     "clsx": "^2.0.0",
26 |     "eslint": "8.33.0",
27 |     "eventsource-parser": "^0.1.0",
28 |     "framer-motion": "^9.0.1",
29 |     "html-react-parser": "^3.0.8",
30 |     "lucide-react": "^0.263.1",
31 |     "next": "^13.4.12",
32 |     "prisma": "^4.10.1",
33 |     "react": "^18.2.0",
34 |     "react-dom": "^18.2.0",
35 |     "react-markdown": "^8.0.5",
36 |     "react-syntax-highlighter": "^15.5.0",
37 |     "react-toastify": "^9.1.1",
38 |     "tailwind-merge": "^1.14.0",
39 |     "tailwindcss-animate": "^1.0.6",
40 |     "typescript": "4.9.5"
41 |   },
42 |   "devDependencies": {
43 |     "@tailwindcss/typography": "^0.5.9",
44 |     "@types/react-syntax-highlighter": "^15.5.6",
45 |     "autoprefixer": "^10.4.13",
46 |     "eslint-config-next": "^13.3.4",
47 |     "postcss": "^8.4.21",
48 |     "tailwindcss": "^3.2.4"
49 |   }
50 | }
51 | 


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


--------------------------------------------------------------------------------
/magic-text/prisma/schema.prisma:
--------------------------------------------------------------------------------
 1 | generator client {
 2 |   provider = "prisma-client-js"
 3 | }
 4 | 
 5 | datasource db {
 6 |   provider = "postgresql"
 7 |   url      = env("DB_URL")
 8 | }
 9 | 
10 | model summary {
11 |   id               Int       @id @default(autoincrement())
12 |   url              String?   @db.VarChar
13 |   video_id         String?   @db.VarChar
14 |   created_at       DateTime? @db.Timestamp(6)
15 |   summary_markdown String?   @db.VarChar
16 | 
17 |   @@index([url], map: "ix_summary_url")
18 |   @@index([video_id], map: "ix_summary_video_id")
19 | }
20 | 


--------------------------------------------------------------------------------
/magic-text/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jxnl/magic-text/c3fbc8286956749865253dcefe818d1ed72bb609/magic-text/public/favicon.ico


--------------------------------------------------------------------------------
/magic-text/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>


--------------------------------------------------------------------------------
/magic-text/public/welcome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jxnl/magic-text/c3fbc8286956749865253dcefe818d1ed72bb609/magic-text/public/welcome.png


--------------------------------------------------------------------------------
/magic-text/public/youtube.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jxnl/magic-text/c3fbc8286956749865253dcefe818d1ed72bb609/magic-text/public/youtube.png


--------------------------------------------------------------------------------
/magic-text/src/app/api/citations/route.tsx:
--------------------------------------------------------------------------------
 1 | import {NextRequest, NextResponse} from "next/server";
 2 | 
 3 | if (!process.env.CITATIONS_URL) {
 4 |   throw new Error("Require CITATIONS_URL")
 5 | }
 6 | if (!process.env.OPENAI_API_KEY) {
 7 |   throw new Error("Require OPENAI_API_KEY")
 8 | }
 9 | 
10 | export type ICitationLocation = [number, number]
11 | 
12 | export type ICitationData = {
13 |   body: string,
14 |   spans: ICitationLocation[],
15 |   citation: string[],
16 | }
17 | 
18 | 
19 | export async function POST(request: NextRequest) {
20 |   const {context, query} = await request.json()
21 | 
22 |   const response = await fetch(process.env.CITATIONS_URL!, {
23 |     method: "POST",
24 |     body: JSON.stringify({
25 |       context, query
26 |     }),
27 |     headers: {
28 |       "Content-Type": "application/json",
29 |       Authorization: `Bearer ${process.env.OPENAI_API_KEY}`
30 |     }
31 |   })
32 |   if (!response.body) {
33 |     console.error("No body found!")
34 |     return NextResponse.json({}, {status: 500})
35 |   }
36 | 
37 |   const reader = response.body.getReader()
38 |   const encoder = new TextEncoder();
39 |   const decoder = new TextDecoder();
40 | 
41 |   const stream = new ReadableStream({
42 |     start: (controller) => {
43 |       return pump();
44 | 
45 |       async function pump(): Promise<void> {
46 |         const {done, value} = await reader.read();
47 |         if (done) {
48 |           controller.close();
49 |           return;
50 |         }
51 |         const data = decoder.decode(value);
52 |         const prefix = data.substring(0, 6)
53 |         if (prefix !== "data: ") {
54 |           throw new Error(`Incorrect prefix in backend response: "${prefix}"`)
55 |         }
56 |         const postfix = data.substring(6)
57 |         if (postfix !== "[DONE]") {
58 |           // Spaces at the end are VERY important
59 |           // Otherwise, Vercel will NOT send full chunk
60 |           const enc = encoder.encode(postfix + "    ")
61 |           controller.enqueue(enc);
62 |         }
63 | 
64 |         return pump();
65 |       }
66 |     }
67 |   })
68 | 
69 |   return new Response(stream, {
70 |     status: 200,
71 |     headers: {
72 |       'Content-Type': 'text/plain; charset=utf-8',
73 |     }
74 |   })
75 | }


--------------------------------------------------------------------------------
/magic-text/src/app/citations/components/CitationDisplay.tsx:
--------------------------------------------------------------------------------
 1 | import { useMemo, useState } from "react";
 2 | 
 3 | type ICitationLocation = [number, number];
 4 | 
 5 | type ICitationData = {
 6 |   body: string;
 7 |   spans: ICitationLocation[];
 8 |   citation: string[];
 9 | };
10 | 
11 | const Citation = ({
12 |   citation,
13 |   onHover,
14 | }: {
15 |   citation: ICitationData;
16 |   onHover: (location: ICitationLocation[]) => void;
17 | }) => {
18 |   return (
19 |     <span
20 |       onMouseEnter={() => onHover(citation.spans)}
21 |       onMouseLeave={() => onHover([])}
22 |       className="cursor-pointer block hover:underline-offset-1 hover:underline"
23 |     >
24 |       {citation.body}{" "}
25 |     </span>
26 |   );
27 | };
28 | 
29 | const CitationDisplay = ({
30 |   context,
31 |   citations,
32 | }: {
33 |   context: string;
34 |   citations: ICitationData[];
35 | }) => {
36 |   const [highlight, setHighlight] = useState<ICitationLocation[]>([]);
37 | 
38 |   const highlightedContext = useMemo(() => {
39 |     if (highlight.length === 0) {
40 |       return context;
41 |     }
42 |     let result = context;
43 |     for (let loc of Array.from(highlight).sort((a,b) => b[0] - a[0])) {
44 |       result =
45 |         result.slice(0, loc[0]) +
46 |         `<mark>` +
47 |         result.slice(loc[0], loc[1]) +
48 |         "</mark>" +
49 |         result.slice(loc[1]);
50 |     }
51 |     return result;
52 |   }, [context, highlight]);
53 | 
54 |   return (
55 |     <div className="prose">
56 |       <div className="bg-white shadow sm:rounded-lg">
57 |         <div className="px-4 sm:p-6">
58 |           {citations.length > 0 ? (
59 |             <>
60 |               <b className="text-base font-semibold leading-6 text-gray-900">
61 |                 Statements
62 |               </b>
63 |             </>
64 |           ) : (
65 |             <b>Loading...</b>
66 |           )}
67 |           <ul className="pb-2 list-disc list-outside">
68 |             {citations.map((c) => (
69 |               <li key={c.body}>
70 |                 <Citation key={c.body} citation={c} onHover={setHighlight} />
71 |               </li>
72 |             ))}
73 |           </ul>
74 |           <b className="font-semibold leading-6 text-gray-900">
75 |             Context with highlights
76 |           </b>
77 |           <div className="mt-2 max-w-xl text-sm text-gray-500">
78 |             <p
79 |               className="text-gray-900 placeholder:text-gray-900 sm:leading-6 "
80 |               dangerouslySetInnerHTML={{ __html: highlightedContext }}
81 |             />
82 |           </div>
83 |         </div>
84 |       </div>
85 |     </div>
86 |   );
87 | };
88 | 
89 | export { CitationDisplay };
90 | 


--------------------------------------------------------------------------------
/magic-text/src/app/citations/layout.tsx:
--------------------------------------------------------------------------------
 1 | const title = "Citations";
 2 | const description =
 3 |   "Magic Citations not only answer questions based on context but will also show you eactly where its coming from!";
 4 | 
 5 | export const metadata = {
 6 |   title,
 7 |   description,
 8 |   twitter: {
 9 |     card: "summary_large_image",
10 |     title,
11 |     description,
12 |     creator: "@jxnlco",
13 |   },
14 | };
15 | 
16 | export default function Layout({ children }: { children: React.ReactNode }) {
17 |   return <div className="py-24 sm:py-32 m-auto">{children}</div>;
18 | }
19 | 


--------------------------------------------------------------------------------
/magic-text/src/app/citations/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import {useRef, useState} from "react";
  4 | import "react-toastify/dist/ReactToastify.css";
  5 | import {ToastContainer, toast} from "react-toastify";
  6 | import {CitationDisplay} from "@/app/citations/components/CitationDisplay";
  7 | import {
  8 |   Tabs,
  9 |   TabsContent,
 10 |   TabsList,
 11 |   TabsTrigger,
 12 | } from "@/app/components/ui/tabs";
 13 | import {Loader2} from "lucide-react";
 14 | import Link from "next/link";
 15 | 
 16 | const defaultContext =
 17 |   "My name is Jason Liu, and I grew up in Toronto Canada but I was born in China.I  went to an arts highschool but in university I studied Computational Mathematics and physics. As part of coop I worked at many companies including Stitchfix, Facebook. I also started the Data Science club at the University of Waterloo and I was the president of the club for 2 years.";
 18 | const defaultQuestion = "What did the author do in school?";
 19 | 
 20 | type ICitationLocation = [number, number];
 21 | 
 22 | type ICitationData = {
 23 |   body: string;
 24 |   spans: ICitationLocation[];
 25 |   citation: string[];
 26 | };
 27 | 
 28 | export default function Example() {
 29 |   const [context, setContext] = useState(defaultContext);
 30 |   const inputRef = useRef<any>();
 31 |   const [loading, setLoading] = useState(false);
 32 |   const [citations, setCitations] = useState<ICitationData[]>([]);
 33 |   const [tab, setTab] = useState("input");
 34 | 
 35 |   const [savedContext, setSavedContext] = useState<string>("");
 36 | 
 37 |   const generateCitations = (e: any) => {
 38 |     e.preventDefault();
 39 | 
 40 |     setLoading(true);
 41 |     setSavedContext(context);
 42 |     setTab("preview");
 43 |     setCitations([]);
 44 | 
 45 |     return fetch("/api/citations", {
 46 |       method: "POST",
 47 |       headers: {
 48 |         "Content-Type": "application/json",
 49 |       },
 50 |       body: JSON.stringify({
 51 |         query: inputRef.current!.value,
 52 |         context,
 53 |       }),
 54 |     })
 55 |       .then(async (response) => {
 56 |         const stream = response.body
 57 |         if (!stream) {
 58 |           return
 59 |         }
 60 |         const reader = stream.getReader()
 61 |         const decoder = new TextDecoder();
 62 | 
 63 |         reader.read().then(function processText({done, value: chunk}): Promise<void> | void {
 64 |           if (done) {
 65 |             return;
 66 |           }
 67 | 
 68 |           const value = decoder.decode(chunk);
 69 |           const parsedCitation = JSON.parse(value)
 70 |           setCitations((prev) => Array.from(prev).concat(parsedCitation));
 71 | 
 72 |           // Read some more, and call this function again
 73 |           return reader.read().then(processText);
 74 |         });
 75 |       })
 76 |       .finally(() => {
 77 |         setLoading(false);
 78 |         toast.success("Try hovering over the statements");
 79 |       });
 80 |   };
 81 | 
 82 |   return (
 83 |     <>
 84 |       <ToastContainer/>
 85 |       <div className="mx-auto max-w-7xl lg:flex lg:gap-8 lg:px-8">
 86 |         <div className="px-6 pt-10 pb-10 sm:pb-22 lg:col-span-7 lg:px-0 lg:pt-20 lg:pb-56 xl:col-span-6 flex-1">
 87 |           <div className="mx-auto max-w-2xl lg:mx-0">
 88 |             <div className="hidden sm:mb-8 sm:flex sm:justify-left">
 89 |               <div
 90 |                 className="relative rounded-full px-3 py-1 text-sm leading-6 text-gray-600 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
 91 |                 Powered by OpenAI Function calls.{" "}
 92 |                 <Link
 93 |                   target="_blank"
 94 |                   href="https://wandb.ai/jxnlco/function-calls/reports/Better-Data-Extraction-Using-Pydantic-and-OpenAI-Function-Calls--Vmlldzo0ODU4OTA3"
 95 |                   className="font-semibold text-red-600"
 96 |                 >
 97 |                   <span className="absolute inset-0" aria-hidden="true"/>
 98 |                   Read more <span aria-hidden="true">&rarr;</span>
 99 |                 </Link>
100 |               </div>
101 |             </div>
102 |             <h1 className="mt-12 text-4xl font-bold tracking-tight text-gray-900 sm:mt-10 sm:text-6xl">
103 |               Exact citations
104 |             </h1>
105 |             <p className="mt-6 text-lg leading-8 text-gray-600">
106 |               Not only can we use language models to answer question from a
107 |               context we can also use structed extraction to provide character
108 |               level citations that allow us to fact check each statement in the
109 |               context, minimizing halucinations.
110 |             </p>
111 |             <div className="mt-10 flex items-center gap-x-6">
112 |               <div className="relative">
113 |                 <label
114 |                   htmlFor="name"
115 |                   className="absolute -top-2 left-2 inline-block bg-white px-1 text-xs font-medium text-gray-900"
116 |                 >
117 |                   Question
118 |                 </label>
119 |                 <input
120 |                   type="text"
121 |                   name="question"
122 |                   id="question"
123 |                   ref={inputRef}
124 |                   size={60}
125 |                   className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-red-600 sm:text-sm sm:leading-6 lg:text-base"
126 |                   placeholder={defaultQuestion}
127 |                 />
128 |               </div>
129 |               <button
130 |                 onClick={generateCitations}
131 |                 disabled={loading}
132 |                 type="button"
133 |                 className="rounded-md flex items-center bg-red-600 py-2 px-3.5 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600 disabled:opacity-80"
134 |               >
135 |                 {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin"/>}
136 |                 {loading ? "Generating..." : "Go!"}
137 |               </button>
138 |             </div>
139 |           </div>
140 |         </div>
141 |         <div className="px-6 lg:px-0 w-full h-full flex-1">
142 |           <Tabs
143 |             value={tab}
144 |             onValueChange={setTab}
145 |             className="mx-auto max-w-2xl lg:mx-0"
146 |           >
147 |             <TabsList>
148 |               <TabsTrigger value="input">Input</TabsTrigger>
149 |               <TabsTrigger value="preview" disabled={!Boolean(savedContext)}>
150 |                 Preview
151 |               </TabsTrigger>
152 |             </TabsList>
153 |             <TabsContent value="input">
154 |               <div className="relative lg:col-span-5 lg:-mr-8 my-auto">
155 |                 <label
156 |                   htmlFor="name"
157 |                   className="absolute -top-2 left-2 inline-block px-1 text-xs font-medium text-gray-900"
158 |                 >
159 |                   Context
160 |                 </label>
161 |                 <textarea
162 |                   value={context}
163 |                   onChange={(e) => setContext(e.target.value)}
164 |                   rows={20}
165 |                   cols={60}
166 |                   disabled={loading}
167 |                   className="block w-full resize-none border-2 border-b border-transparent pb-2 text-gray-900 placeholder:text-gray-900 bg-gray-100 p-3 rounded-md focus:border-indigo-600 focus:ring-0 sm:text-sm sm:leading-6 font-mono"
168 |                 />
169 |               </div>
170 |             </TabsContent>
171 |             <TabsContent value="preview">
172 |               <CitationDisplay context={savedContext} citations={citations}/>
173 |             </TabsContent>
174 |           </Tabs>
175 |         </div>
176 |       </div>
177 |     </>
178 |   );
179 | }
180 | 


--------------------------------------------------------------------------------
/magic-text/src/app/components/Footer.tsx:
--------------------------------------------------------------------------------
 1 | import Link from "next/link";
 2 | import { SVGProps } from "react";
 3 | import { navigation } from "./links";
 4 | 
 5 | const social = [
 6 |   {
 7 |     name: "Instagram",
 8 |     href: "https://www.instagram.com/jxnlco/",
 9 |     icon: (props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) => (
10 |       <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
11 |         <path
12 |           fillRule="evenodd"
13 |           d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
14 |           clipRule="evenodd"
15 |         />
16 |       </svg>
17 |     ),
18 |   },
19 |   {
20 |     name: "Twitter",
21 |     href: "https://twitter.com/jxnlco",
22 |     icon: (props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) => (
23 |       <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
24 |         <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
25 |       </svg>
26 |     ),
27 |   },
28 |   {
29 |     name: "GitHub",
30 |     href: "https://www.github.com/jxnl",
31 |     icon: (props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) => (
32 |       <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
33 |         <path
34 |           fillRule="evenodd"
35 |           d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
36 |           clipRule="evenodd"
37 |         />
38 |       </svg>
39 |     ),
40 |   },
41 | ];
42 | 
43 | export default function Footer() {
44 |   return (
45 |     <footer className="bg-white">
46 |       <div className="mx-auto max-w-7xl overflow-hidden py-20 px-6 sm:py-24 lg:px-8">
47 |         <nav
48 |           className="-mb-6 columns-2 sm:flex sm:justify-center sm:space-x-12"
49 |           aria-label="Footer"
50 |         >
51 |           {navigation.map((item) => (
52 |             <div key={item.name} className="pb-6">
53 |               <Link
54 |                 href={item.href}
55 |                 className="text-sm leading-6 text-gray-600 hover:text-gray-900"
56 |               >
57 |                 {item.name}
58 |               </Link>
59 |             </div>
60 |           ))}
61 |         </nav>
62 |         <div className="mt-10 flex justify-center space-x-10">
63 |           {social.map((item) => (
64 |             <Link
65 |               key={item.name}
66 |               href={item.href}
67 |               target="blank"
68 |               className="text-gray-400 hover:text-gray-500"
69 |             >
70 |               <span className="sr-only">{item.name}</span>
71 |               <item.icon className="h-6 w-6" aria-hidden="true" />
72 |             </Link>
73 |           ))}
74 |         </div>
75 |         <p className="mt-10 text-center text-xs leading-5 text-gray-500">
76 |           &copy; jxnl.co, Any sufficiently Advanced Technology is
77 |           indistinguishable from magic.
78 |         </p>
79 |       </div>
80 |     </footer>
81 |   );
82 | }
83 | 


--------------------------------------------------------------------------------
/magic-text/src/app/components/Header.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useState } from "react";
  4 | import { Dialog } from "@headlessui/react";
  5 | import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
  6 | import { SparklesIcon } from "@heroicons/react/24/solid";
  7 | import Link from "next/link";
  8 | import { navigation } from "./links";
  9 | 
 10 | export default function Header() {
 11 |   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 12 | 
 13 |   return (
 14 |     <header className="absolute inset-x-0 top-0 z-50">
 15 |       <nav
 16 |         className="flex items-center justify-between p-6 lg:px-8"
 17 |         aria-label="Global"
 18 |       >
 19 |         <div className="flex lg:flex-1">
 20 |           <a href="/" className="-m-1.5 p-1.5">
 21 |             <span className="sr-only">Your Company</span>
 22 |             <SparklesIcon className="h-8 w-auto" aria-hidden="true" />
 23 |           </a>
 24 |         </div>
 25 |         <div className="flex lg:hidden">
 26 |           <button
 27 |             type="button"
 28 |             className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
 29 |             onClick={() => setMobileMenuOpen(true)}
 30 |           >
 31 |             <span className="sr-only">Open main menu</span>
 32 |             <Bars3Icon className="h-6 w-6" aria-hidden="true" />
 33 |           </button>
 34 |         </div>
 35 |         <div className="hidden lg:flex lg:gap-x-12">
 36 |           {navigation.map((item) => (
 37 |             <Link
 38 |               key={item.name}
 39 |               href={item.href}
 40 |               className="text-sm font-semibold leading-6 text-gray-900 hover:opacity-80"
 41 |             >
 42 |               {item.name}
 43 |             </Link>
 44 |           ))}
 45 |         </div>
 46 |         <div className="hidden lg:flex lg:flex-1 lg:justify-end">
 47 |           <Link
 48 |             href="https://jxnl.co"
 49 |             target="_blank"
 50 |             className="text-sm font-semibold leading-6 text-gray-900"
 51 |           >
 52 |             About me <span aria-hidden="true">&rarr;</span>
 53 |           </Link>
 54 |         </div>
 55 |       </nav>
 56 |       <Dialog
 57 |         as="div"
 58 |         className="lg:hidden"
 59 |         open={mobileMenuOpen}
 60 |         onClose={setMobileMenuOpen}
 61 |       >
 62 |         <div className="fixed inset-0 z-50" />
 63 |         <Dialog.Panel className="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
 64 |           <div className="flex items-center justify-between">
 65 |             <a href="/" className="-m-1.5 p-1.5">
 66 |               <span className="sr-only">Magic</span>
 67 |               <SparklesIcon className="h-8 w-auto" aria-hidden="true" />
 68 |             </a>
 69 |             <button
 70 |               type="button"
 71 |               className="-m-2.5 rounded-md p-2.5 text-gray-700"
 72 |               onClick={() => setMobileMenuOpen(false)}
 73 |             >
 74 |               <span className="sr-only">Close menu</span>
 75 |               <XMarkIcon className="h-6 w-6" aria-hidden="true" />
 76 |             </button>
 77 |           </div>
 78 |           <div className="mt-6 flow-root">
 79 |             <div className="-my:75-6 divide-y divide-gray-500/10">
 80 |               <div className="space-y-2 py-6">
 81 |                 {navigation.map((item) => (
 82 |                   <Link
 83 |                     key={item.name}
 84 |                     href={item.href}
 85 |                     className="-mx-3 block rounded-lg py-2 px-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
 86 |                   >
 87 |                     {item.name}
 88 |                   </Link>
 89 |                 ))}
 90 |               </div>
 91 |               <div className="py-6">
 92 |                 <a
 93 |                   href="https://jxnl.co"
 94 |                   className="-mx-3 block rounded-lg py-2.5 px-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
 95 |                 >
 96 |                   About me
 97 |                 </a>
 98 |               </div>
 99 |             </div>
100 |           </div>
101 |         </Dialog.Panel>
102 |       </Dialog>
103 |     </header>
104 |   );
105 | }
106 | 


--------------------------------------------------------------------------------
/magic-text/src/app/components/Hero.tsx:
--------------------------------------------------------------------------------
 1 | import { CurrencyDollarIcon } from "@heroicons/react/24/solid";
 2 | import Link from "next/link";
 3 | 
 4 | export default function Home() {
 5 |   return (
 6 |     <div className="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
 7 |       <div className="hidden sm:mb-8 sm:flex sm:justify-center">
 8 |         <div className="relative rounded-full py-1 px-3 text-sm leading-6 text-gray-600 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
 9 |           Powered by{" "}
10 |           <Link
11 |             href="https://openai.com"
12 |             className="font-bold text-blue-600"
13 |             target={"_blank"}
14 |           >
15 |             OpenAI
16 |           </Link>
17 |           ,
18 |           <Link
19 |             href="https://vercel.com"
20 |             className="font-bold text-blue-600"
21 |             target={"_blank"}
22 |           >
23 |             Vercel
24 |           </Link>
25 |           , and{" "}
26 |           <Link
27 |             href="https://modal.com/"
28 |             className="font-bold text-blue-600"
29 |             target={"_blank"}
30 |           >
31 |             Modal
32 |           </Link>
33 |         </div>
34 |       </div>
35 |       <div className="text-center">
36 |         <h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
37 |           Welcome to my Magic Playground.
38 |         </h1>
39 |         <p className="mt-6 text-lg leading-8 text-gray-600">
40 |           {
41 |             "I'm a machine learning engineer and I love to play with large language models. I've built this site to make it easy for you to play with them too. My background is computational mathematics but I decided to dedicate some time to learning React and Next.js."
42 |           }
43 |         </p>
44 |         <div className="mt-10 flex items-center justify-center gap-x-6">
45 |           <a
46 |             href="#links"
47 |             className="rounded-md bg-blue-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
48 |           >
49 |             Get started
50 |           </a>
51 |           <a
52 |             href="https://www.github.com/jxnl/magic-text"
53 |             target={"_blank"}
54 |             rel={"noreferrer"}
55 |             className="rounded-md bg-black px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-grey-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
56 |           >
57 |             <svg
58 |               fill="currentColor"
59 |               viewBox="0 0 24 24"
60 |               className="w-5 h-5 inline mr-1"
61 |               aria-hidden={true}
62 |             >
63 |               <path
64 |                 fillRule="evenodd"
65 |                 d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
66 |                 clipRule="evenodd"
67 |               />
68 |             </svg>
69 |             Star on Github
70 |           </a>
71 |           <a
72 |             href="https://www.buymeacoffee.com/jxnl"
73 |             target={"_blank"}
74 |             rel={"noreferrer"}
75 |             className="rounded-md bg-green-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600"
76 |           >
77 |             <CurrencyDollarIcon className="w-5 h-5 inline mr-1" />
78 |             Buy me a coffee
79 |           </a>
80 |         </div>
81 |       </div>
82 |     </div>
83 |   );
84 | }
85 | 


--------------------------------------------------------------------------------
/magic-text/src/app/components/MagicLinks.tsx:
--------------------------------------------------------------------------------
 1 | import { navigation } from "./links";
 2 | import Link from "next/link";
 3 | 
 4 | export default function Example() {
 5 |   return (
 6 |     <section id="links">
 7 |       <div className="bg-white py-24 sm:py-32">
 8 |         <div className="mx-auto max-w-7xl px-6 lg:px-8">
 9 |           <div className="mx-auto max-w-2xl lg:text-center">
10 |             <h2 className="text-base font-semibold leading-7 text-blue-600">
11 |               Magic by <Link href="https://jxnl.co">Jason</Link>
12 |             </h2>
13 |             <p className="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
14 |               A Large Language Model Playground
15 |             </p>
16 |             <p className="mt-6 text-lg leading-8 text-gray-600">
17 |               I{"'"}m currently revamping my site to make it easier to use. Hit
18 |               me up on my socials or{" "}
19 |               <a
20 |                 href="mailto:jason+magic@jxnl.co"
21 |                 className="underline underline-offset-4"
22 |               >
23 |                 email
24 |               </a>{" "}
25 |               me if you have any questions. Click any of these links to get
26 |               started.
27 |             </p>
28 |           </div>
29 |           <div className="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-4xl">
30 |             <dl className="grid max-w-xl grid-cols-1 gap-y-10 gap-x-8 lg:max-w-none lg:grid-cols-2 lg:gap-y-16">
31 |               {navigation
32 |                 .filter((feature) => feature.hide !== true)
33 |                 .map((feature) => (
34 |                   <Link
35 |                     key={feature.name}
36 |                     href={feature.href}
37 |                     className="relative pl-16 opacity-80 hover:opacity-100"
38 |                   >
39 |                     <dt className="text-base font-semibold leading-7 text-gray-900">
40 |                       <div className="absolute top-0 left-0 flex h-10 w-10 items-center justify-center rounded-lg bg-blue-600">
41 |                         <feature.icon
42 |                           className="h-6 w-6 text-white"
43 |                           aria-hidden="true"
44 |                         />
45 |                       </div>
46 |                       {feature.name}
47 |                     </dt>
48 |                     <dd className="mt-2 text-base leading-7 text-gray-600">
49 |                       {feature.desc}
50 |                     </dd>
51 |                   </Link>
52 |                 ))}
53 |             </dl>
54 |           </div>
55 |         </div>
56 |       </div>
57 |     </section>
58 |   );
59 | }
60 | 


--------------------------------------------------------------------------------
/magic-text/src/app/components/links.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   ChatBubbleBottomCenterTextIcon,
 3 |   CircleStackIcon,
 4 |   CodeBracketIcon,
 5 |   CurrencyDollarIcon,
 6 |   DocumentIcon,
 7 |   FilmIcon,
 8 |   HomeIcon,
 9 | } from "@heroicons/react/24/outline";
10 | 
11 | export const navigation = [
12 |   {
13 |     name: "Home",
14 |     href: "/",
15 |     desc: "Home where you can find the other pages.",
16 |     icon: HomeIcon,
17 |     hide: true,
18 |   },
19 |   {
20 |     name: "Journal (Beta)",
21 |     href: "https://jrnl.jxnl.co",
22 |     desc: "Conversational life coach which writes your daily journal. It has a long term memory of who you are and its designed to help you achieve your goals and live a better life. Asks you thoughtful questions and helps you reflect on your day.",
23 |     icon: ChatBubbleBottomCenterTextIcon,
24 |   },
25 |   {
26 |     name: "Youtube",
27 |     href: "/youtube",
28 |     desc: "Get video summary in markdown format, with or without transcript.",
29 |     icon: FilmIcon,
30 |   },
31 |   {
32 |     name: "Data Analyst",
33 |     href: "/data",
34 |     desc: "Ask plain English questions with a SQL Schema and get queries, explanations, and update schemas.",
35 |     icon: CircleStackIcon,
36 |   },
37 |   {
38 |     name: "Exact citations",
39 |     href: "/citations",
40 |     desc: "Ask plain English questions with a SQL Schema and get queries, explanations, and update schemas.",
41 |     icon: CircleStackIcon,
42 |   },
43 |   {
44 |     name: "Text Brushs",
45 |     href: "/text",
46 |     desc: "Instantly customize highlighted text with brush options in real-time.",
47 |     icon: DocumentIcon,
48 |   },
49 |   {
50 |     name: "Tailwind CSS",
51 |     href: "/demo/div",
52 |     desc: "Create HTML divs with natural language, powered by tailwindcss.",
53 |     icon: CodeBracketIcon,
54 |   },
55 | ];
56 | 
57 | export function Support() {
58 |   return (
59 |     <div className="mt-10 flex items-center justify-center gap-x-6">
60 |       <a
61 |         href="https://www.github.com/jxnl/magic-text"
62 |         target={"_blank"}
63 |         rel={"noreferrer"}
64 |         className="rounded-md bg-black px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-grey-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
65 |       >
66 |         <svg
67 |           fill="currentColor"
68 |           viewBox="0 0 24 24"
69 |           className="w-5 h-5 inline mr-1"
70 |           aria-hidden={true}
71 |         >
72 |           <path
73 |             fillRule="evenodd"
74 |             d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
75 |             clipRule="evenodd"
76 |           />
77 |         </svg>
78 |         Star on Github
79 |       </a>
80 |       <a
81 |         href="https://www.buymeacoffee.com/jxnl"
82 |         target={"_blank"}
83 |         rel={"noreferrer"}
84 |         className="rounded-md bg-green-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600"
85 |       >
86 |         <CurrencyDollarIcon className="w-5 h-5 inline mr-1" />
87 |         Buy me a coffee
88 |       </a>
89 |     </div>
90 |   );
91 | }
92 | 


--------------------------------------------------------------------------------
/magic-text/src/app/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-10 items-center justify-center rounded-md 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-sm px-3 py-1.5 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-sm",
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 | 


--------------------------------------------------------------------------------
/magic-text/src/app/data/components/Divider.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   ArrowUpOnSquareIcon,
 3 |   ClipboardDocumentIcon,
 4 |   ClipboardDocumentListIcon,
 5 | } from "@heroicons/react/24/outline";
 6 | import { toast } from "react-toastify";
 7 | export default function Divider({
 8 |   query,
 9 |   schema,
10 | }: {
11 |   query: string;
12 |   schema: string;
13 | }) {
14 |   return (
15 |     <div className="relative py-5">
16 |       <div className="absolute inset-0 flex items-center" aria-hidden="true">
17 |         <div className="w-full border-t border-gray-300" />
18 |       </div>
19 |       <div className="relative flex justify-center space-x-5">
20 |         <button
21 |           type="button"
22 |           className="inline-flex items-center gap-x-1.5 rounded-full bg-white px-3 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
23 |           onClick={() => {
24 |             if (query.length === 0) {
25 |               toast.error("Please generate a query first");
26 |               return;
27 |             }
28 |             navigator.clipboard.writeText(
29 |               query + `\n\n-- Powered by https://magic.jxnl.co/data`
30 |             );
31 |             toast.success("Copied to clipboard!");
32 |           }}
33 |         >
34 |           <ClipboardDocumentIcon
35 |             className="-ml-1 -mr-0.5 h-5 w-5 text-gray-400"
36 |             aria-hidden="true"
37 |           />
38 |           Query
39 |         </button>
40 |         <button
41 |           type="button"
42 |           className="inline-flex items-center gap-x-1.5 rounded-full bg-white px-3 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
43 |           onClick={() => {
44 |             if (schema.length === 0) {
45 |               toast.error("Please generate a schema first");
46 |               return;
47 |             }
48 | 
49 |             navigator.clipboard.writeText(
50 |               schema + `\n\n-- Powered by https://magic.jxnl.co/data`
51 |             );
52 |             toast.success("Copied to clipboard!");
53 |           }}
54 |         >
55 |           <ClipboardDocumentListIcon
56 |             className="-ml-1 -mr-0.5 h-5 w-5 text-gray-400"
57 |             aria-hidden="true"
58 |           />
59 |           Schema
60 |         </button>
61 |       </div>
62 |     </div>
63 |   );
64 | }
65 | 


--------------------------------------------------------------------------------
/magic-text/src/app/data/layout.tsx:
--------------------------------------------------------------------------------
 1 | const title = "Data Analysis";
 2 | const description =
 3 |   "Magic Data Analysis is a tool for extracting knowledge from data by asking questions.";
 4 | 
 5 | export const metadata = {
 6 |   title,
 7 |   description,
 8 |   twitter: {
 9 |     card: "summary_large_image",
10 |     title,
11 |     description,
12 |     creator: "@jxnlco",
13 |   },
14 | };
15 | 
16 | export default function Layout({ children }: { children: React.ReactNode }) {
17 |   return <div className="py-24 sm:py-32 m-auto">{children}</div>;
18 | }
19 | 


--------------------------------------------------------------------------------
/magic-text/src/app/data/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useRef, useState } from "react";
  4 | import SyntaxHighlighter from "react-syntax-highlighter";
  5 | import { makePrompt } from "./prompt";
  6 | import "react-toastify/dist/ReactToastify.css";
  7 | import { ToastContainer, toast } from "react-toastify";
  8 | import Divider from "./components/Divider";
  9 | 
 10 | const sampleSchema = `
 11 | CREATE TABLE Customers (
 12 |     customer_id INT PRIMARY KEY,
 13 |     first_name VARCHAR(50),
 14 |     last_name VARCHAR(50),
 15 |     email VARCHAR(100),
 16 |     created_at DATE
 17 | );
 18 | 
 19 | CREATE TABLE Orders (
 20 |     order_id INT PRIMARY KEY,
 21 |     customer_id INT,
 22 |     order_total DECIMAL(10,2),
 23 |     order_date DATE,
 24 |     FOREIGN KEY (customer_id) REFERENCES Customers(customer_id)
 25 | );
 26 | 
 27 | CREATE TABLE Products (
 28 |     product_id INT PRIMARY KEY,
 29 |     product_name VARCHAR(100)`.trim();
 30 | 
 31 | const sampleQuery = `SELECT Count(1) FROM Customers;`;
 32 | 
 33 | export default function Example() {
 34 |   const [schema, setSchema] = useState(sampleSchema);
 35 |   const [query, setQuery] = useState("SELECT * FROM Customers;");
 36 |   const inputRef = useRef<any>();
 37 |   const [loading, setLoading] = useState(false);
 38 | 
 39 |   const generateFillin = async (e: any) => {
 40 |     e.preventDefault();
 41 | 
 42 |     const prompt = makePrompt(inputRef.current!.value, schema, query);
 43 | 
 44 |     setLoading(true);
 45 |     const response = await fetch("/api/generate", {
 46 |       method: "POST",
 47 |       headers: {
 48 |         "Content-Type": "application/json",
 49 |       },
 50 |       body: JSON.stringify({
 51 |         prompt,
 52 |       }),
 53 |     });
 54 |     console.log("Edge function returned.");
 55 |     console.log(response);
 56 | 
 57 |     if (!response.ok) {
 58 |       throw new Error(response.statusText);
 59 |     }
 60 | 
 61 |     // This data is a ReadableStream
 62 |     const data = response.body;
 63 |     if (!data) {
 64 |       return;
 65 |     }
 66 | 
 67 |     const reader = data.getReader();
 68 |     const decoder = new TextDecoder();
 69 |     let done = false;
 70 |     var _fillText = "";
 71 |     while (!done) {
 72 |       const { value, done: doneReading } = await reader.read();
 73 |       done = doneReading;
 74 |       const chunkValue = decoder.decode(value);
 75 |       _fillText += chunkValue;
 76 |       setQuery(_fillText.trim());
 77 |     }
 78 | 
 79 |     if (_fillText.includes("ALTER TABLE")) {
 80 |       setSchema(schema + "\n\n" + _fillText);
 81 |     }
 82 | 
 83 |     if (_fillText.includes("CREATE TABLE")) {
 84 |       setSchema(schema + "\n\n" + _fillText);
 85 |     }
 86 | 
 87 |     setLoading(false);
 88 |   };
 89 | 
 90 |   return (
 91 |     <>
 92 |       <ToastContainer />
 93 |       <div className="mx-auto max-w-7xl lg:grid lg:grid-cols-12 lg:gap-x-8 lg:px-8">
 94 |         <div className="px-6 pt-10 pb-10 sm:pb-32 lg:col-span-7 lg:px-0 lg:pt-20 lg:pb-56 xl:col-span-6">
 95 |           <div className="mx-auto max-w-2xl lg:mx-0">
 96 |             <h1 className="mt-12 text-4xl font-bold tracking-tight text-gray-900 sm:mt-10 sm:text-6xl">
 97 |               Magic Data
 98 |             </h1>
 99 |             <p className="mt-6 text-lg leading-8 text-gray-600">
100 |               Magic Data is a tool that helps you understand your data, bring
101 |               your own schema and data, and get insights from your data. You can
102 |               also ask it to create new tables and migrations and we{"'"}ll
103 |               append it to the schema
104 |             </p>
105 |             <div className="mt-10 flex items-center gap-x-6">
106 |               <div className="relative">
107 |                 <label
108 |                   htmlFor="name"
109 |                   className="absolute -top-2 left-2 inline-block bg-white px-1 text-xs font-medium text-gray-900"
110 |                 >
111 |                   Question
112 |                 </label>
113 |                 <input
114 |                   type="text"
115 |                   name="question"
116 |                   id="question"
117 |                   ref={inputRef}
118 |                   size={60}
119 |                   className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-red-600 sm:text-sm sm:leading-6 lg:text-base"
120 |                   placeholder="What is the average age of our customers?"
121 |                 />
122 |               </div>
123 |               <button
124 |                 onClick={generateFillin}
125 |                 disabled={loading}
126 |                 type="button"
127 |                 className="rounded-md bg-red-600 py-2 px-3.5 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600 disabled:opacity-80"
128 |               >
129 |                 Go!
130 |               </button>
131 |             </div>
132 |             <SyntaxHighlighter
133 |               wrapLongLines={true}
134 |               language="sql"
135 |               className="block mt-5 min-h-full w-full resize-none border-2 border-b border-transparent p-0 pb-2 text-gray-900 placeholder:text-gray-900 bg-gray-100 p-3 rounded-md focus:border-indigo-600 focus:ring-0 sm:text-sm sm:leading-6 font-mono"
136 |             >
137 |               {query}
138 |             </SyntaxHighlighter>
139 |           </div>
140 |         </div>
141 |         <div className="lg:hidden">
142 |           <Divider schema={schema} query={query} />
143 |         </div>
144 |         <div className="relative lg:col-span-5 lg:-mr-8 my-auto">
145 |           <label
146 |             htmlFor="name"
147 |             className="absolute -top-2 left-2 inline-block px-1 text-xs font-medium text-gray-900"
148 |           >
149 |             Bring your own schema
150 |           </label>
151 |           <textarea
152 |             value={schema}
153 |             onChange={(e) => setSchema(e.target.value)}
154 |             rows={20}
155 |             cols={60}
156 |             disabled={loading}
157 |             className="block w-full resize-none border-2 border-b border-transparent p-0 pb-2 text-gray-900 placeholder:text-gray-900 bg-gray-100 p-3 rounded-md focus:border-indigo-600 focus:ring-0 sm:text-sm sm:leading-6 font-mono"
158 |           />
159 |           <Divider schema={schema} query={query} />
160 |         </div>
161 |       </div>
162 |     </>
163 |   );
164 | }
165 | 


--------------------------------------------------------------------------------
/magic-text/src/app/data/prompt.tsx:
--------------------------------------------------------------------------------
 1 | export function makePrompt(
 2 |   question: string,
 3 |   schema: string,
 4 |   currentQuery: string
 5 | ) {
 6 |   const date = new Date().toDateString();
 7 | 
 8 |   const prompt = `
 9 | You are a data scientist that helps your coworkers to answer questins about the data.
10 | You will be given a scheme and a question to answer. Reply only with the SQL query that answers the question.
11 | But leave comments inline to help your coworkers understand your thought process.
12 | 
13 | If the question cannot be answered response with a sql comment explaining why.
14 | and suggest what data you might need to connect to answer the question.
15 | 
16 | The data you have access to has the following schema:
17 | 
18 | Schemas:
19 | ${schema}
20 | 
21 | Example:
22 | 
23 | Question: What is the minimum value of column b for each value of column a?
24 | SQL Query: 
25 | -- This query ... 
26 | -- 1. ...
27 | -- 2. ...
28 | -- ...
29 | SELECT 
30 |   table.a
31 |  , min(table2.b)
32 | FROM table
33 | -- Join the two tables to get the data we need
34 | -- we need to filter the data to only get the data we need
35 | LEFT JOIN ON table2.id = table.id
36 | WHERE table2.id = 1
37 | GROUP BY 1
38 | 
39 | Question: how many kinds cars are on the moon?
40 | SQL Query:
41 | -- I don't know how to answer this question
42 | -- maybe if we had data about the moon we could answer this question
43 | 
44 | The date is ${date}
45 | 
46 | Question:
47 | ${question}
48 | 
49 | The last query you wrote was:
50 | ${currentQuery}
51 | 
52 | SQL Query:
53 | `;
54 |   return prompt;
55 | }
56 | 


--------------------------------------------------------------------------------
/magic-text/src/app/demo/components/Notification.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { Fragment, useState } from "react";
 4 | import { Dialog, Transition } from "@headlessui/react";
 5 | import { CheckIcon } from "@heroicons/react/24/outline";
 6 | 
 7 | export default function Example() {
 8 |   const [open, setOpen] = useState(true);
 9 | 
10 |   return (
11 |     <Transition.Root show={open} as={Fragment}>
12 |       <Dialog as="div" className="relative z-10" onClose={setOpen}>
13 |         <Transition.Child
14 |           as={Fragment}
15 |           enter="ease-out duration-300"
16 |           enterFrom="opacity-0"
17 |           enterTo="opacity-100"
18 |           leave="ease-in duration-200"
19 |           leaveFrom="opacity-100"
20 |           leaveTo="opacity-0"
21 |         >
22 |           <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
23 |         </Transition.Child>
24 | 
25 |         <div className="fixed inset-0 z-10 overflow-y-auto">
26 |           <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
27 |             <Transition.Child
28 |               as={Fragment}
29 |               enter="ease-out duration-300"
30 |               enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
31 |               enterTo="opacity-100 translate-y-0 sm:scale-100"
32 |               leave="ease-in duration-200"
33 |               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
34 |               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
35 |             >
36 |               <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6">
37 |                 <div>
38 |                   <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
39 |                     <CheckIcon
40 |                       className="h-6 w-6 text-green-600"
41 |                       aria-hidden="true"
42 |                     />
43 |                   </div>
44 |                   <div className="mt-3 text-center sm:mt-5">
45 |                     <Dialog.Title
46 |                       as="h3"
47 |                       className="text-base font-semibold leading-6 text-gray-900"
48 |                     >
49 |                       Migration coming soon
50 |                     </Dialog.Title>
51 |                     <div className="mt-2">
52 |                       <p className="text-sm text-gray-500">
53 |                         You might notice that this site is a little different, I
54 |                         am working on a new version that will be easier to use.
55 |                       </p>
56 |                     </div>
57 |                   </div>
58 |                 </div>
59 |                 <div className="mt-5 sm:mt-6">
60 |                   <button
61 |                     type="button"
62 |                     className="inline-flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
63 |                     onClick={() => setOpen(false)}
64 |                   >
65 |                     Close
66 |                   </button>
67 |                 </div>
68 |               </Dialog.Panel>
69 |             </Transition.Child>
70 |           </div>
71 |         </div>
72 |       </Dialog>
73 |     </Transition.Root>
74 |   );
75 | }
76 | 


--------------------------------------------------------------------------------
/magic-text/src/app/demo/components/TitleCard.tsx:
--------------------------------------------------------------------------------
 1 | import Link from "next/link";
 2 | 
 3 | export default function TitleCard(props: {
 4 |   title: string;
 5 |   description: string;
 6 | }) {
 7 |   const { title, description } = props;
 8 |   return (
 9 |     <>
10 |       <h1 className="sm:text-6xl text-lg max-w-2xl font-bold text-slate-900 items-center">
11 |         <Link href="/">Magic</Link> {title} by{" "}
12 |         <a
13 |           className="underline-offset-8 underline"
14 |           href="https://jxnl.co/contact"
15 |         >
16 |           Jason
17 |         </a>
18 |       </h1>
19 |       <p className="text-md text-gray-600 my-6">
20 |         {description} If you have any suggestions send me an{" "}
21 |         <a
22 |           className="underline hover:opacity-70"
23 |           href="mailto:jason+magicfeedback@jxnl.co"
24 |         >
25 |           email
26 |         </a>
27 |       </p>
28 |     </>
29 |   );
30 | }
31 | 


--------------------------------------------------------------------------------
/magic-text/src/app/demo/components/analytics.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { Analytics } from "@vercel/analytics/react";
3 | 
4 | export function AnalyticsWrapper() {
5 |   return <Analytics />;
6 | }
7 | 


--------------------------------------------------------------------------------
/magic-text/src/app/demo/div/head.tsx:
--------------------------------------------------------------------------------
 1 | export default function Head() {
 2 |   return (
 3 |     <>
 4 |       <title>Magic Div</title>
 5 |       <link rel="icon" href="/favicon.ico" />
 6 |       <meta
 7 |         name="description"
 8 |         content="Write HTML/Tailwind css in plain english."
 9 |       />
10 |       <meta
11 |         property="og:description"
12 |         content="Write HTML/Tailwind css in plain english"
13 |       />
14 |       <meta
15 |         property="og:title"
16 |         content="Write HTML/Tailwind css in plain english"
17 |       />
18 |       <meta name="twitter:title" content="Magic <div>" />
19 |       <meta
20 |         name="twitter:description"
21 |         content="Write HTML/Tailwind css in plain english"
22 |       />
23 |       <meta name="twitter:card" content="summary_large_image"></meta>
24 |       <meta
25 |         name="twitter:image"
26 |         content="https://cdn.discordapp.com/attachments/990816889657778196/1071941320052047953/CJ_EatinStarz_knight_Hacking_on_computer_matrix_071dc515-5af4-4911-a45f-2c2638863719.png"
27 |       ></meta>
28 |     </>
29 |   );
30 | }
31 | 


--------------------------------------------------------------------------------
/magic-text/src/app/demo/div/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useState } from "react";
  4 | import SyntaxHighlighter from "react-syntax-highlighter";
  5 | import parse from "html-react-parser";
  6 | import { makePrompt, exampleQuestion } from "./prompt";
  7 | import Script from "next/script";
  8 | import TitleCard from "../components/TitleCard";
  9 | 
 10 | export default function Home(): JSX.Element {
 11 |   const [loading, setLoading] = useState(false);
 12 |   const [command, setCommand] = useState(exampleQuestion.trim());
 13 |   const [html, setHTML] = useState("<div></div>");
 14 |   const [stop, setStop] = useState(false);
 15 | 
 16 |   const generateFillin = async (e: any) => {
 17 |     e.preventDefault();
 18 | 
 19 |     setLoading(true);
 20 | 
 21 |     const prompt = makePrompt(command, html);
 22 | 
 23 |     var _fillText = "";
 24 | 
 25 |     const response = await fetch("/api/generate", {
 26 |       method: "POST",
 27 |       headers: {
 28 |         "Content-Type": "application/json",
 29 |       },
 30 |       body: JSON.stringify({
 31 |         prompt: prompt,
 32 |       }),
 33 |     });
 34 |     console.log("Edge function returned.");
 35 |     console.log(response);
 36 | 
 37 |     if (!response.ok) {
 38 |       throw new Error(response.statusText);
 39 |     }
 40 | 
 41 |     // This data is a ReadableStream
 42 |     const data = response.body;
 43 |     if (!data) {
 44 |       return;
 45 |     }
 46 | 
 47 |     const reader = data.getReader();
 48 |     const decoder = new TextDecoder();
 49 |     let done = false;
 50 | 
 51 |     while (!done && !stop) {
 52 |       const { value, done: doneReading } = await reader.read();
 53 |       done = doneReading;
 54 |       const chunkValue = decoder.decode(value);
 55 |       _fillText += chunkValue;
 56 |       setHTML(_fillText.trim());
 57 |     }
 58 | 
 59 |     setLoading(false);
 60 |     setStop(false);
 61 |   };
 62 | 
 63 |   return (
 64 |     <div>
 65 |       <TitleCard
 66 |         title="Div"
 67 |         description="Magic Div is a tool for generating HTML from a natural language demand.
 68 |         It is a work in progress, but you can try it out below.
 69 |         "
 70 |       />
 71 | 
 72 |       <SyntaxHighlighter
 73 |         wrapLongLines={true}
 74 |         language="html"
 75 |         className="mt-6 p-6 py-10 rounded-md text-xs"
 76 |       >
 77 |         {html}
 78 |       </SyntaxHighlighter>
 79 | 
 80 |       <div className="grid grid-cols-5 gap-3 mt-6">
 81 |         <div className="col-span-5 md:col-span-4">
 82 |           <textarea
 83 |             value={command}
 84 |             disabled={loading}
 85 |             rows={5}
 86 |             className="w-full rounded-lg text-md border-gray-00  text-gray-700 bg-gray-50 p-2 border-2 disabled:opacity-60"
 87 |             onChange={(e) => {
 88 |               setCommand(e.target.value);
 89 |             }}
 90 |           />
 91 |         </div>
 92 |         <div className="col-span-5 md:col-span-1 space-y-2">
 93 |           <button
 94 |             onClick={(e) => generateFillin(e)}
 95 |             disabled={loading}
 96 |             className="w-full rounded-lg px-4 py-2 text-md font-medium text-gray-900 bg-gray-50 hover:bg-gray-100 border border-gray-200 disabled:opacity-60"
 97 |           >
 98 |             Ask Magic
 99 |           </button>
100 |           <button
101 |             onClick={() => {
102 |               setHTML("<div></div>");
103 |             }}
104 |             className="w-full rounded-lg px-4 py-2 text-md font-medium text-gray-900 bg-gray-50 hover:bg-gray-100 border border-gray-200 disabled:opacity-60"
105 |           >
106 |             Clear Html
107 |           </button>
108 |           <button
109 |             onClick={() => {
110 |               setCommand("");
111 |             }}
112 |             className="w-full rounded-lg px-4 py-2 text-md font-medium text-gray-900 bg-gray-50 hover:bg-gray-100 border border-gray-200 disabled:opacity-60"
113 |           >
114 |             Clear Text
115 |           </button>
116 |         </div>
117 |       </div>
118 |       <div className="mt-5 rounded-lg p-5 bg-gray-50">{parse(html)}</div>
119 |       <Script src="https://unpkg.com/tailwindcss-jit-cdn"></Script>
120 |     </div>
121 |   );
122 | }
123 | 


--------------------------------------------------------------------------------
/magic-text/src/app/demo/div/prompt.tsx:
--------------------------------------------------------------------------------
 1 | export function makePrompt(command: string, currentHTML: string) {
 2 |   const prompt = `
 3 | You will be given a question and a current html snippet and the task is to modify the html snippet to answer the request.
 4 | 
 5 | Use these two tags as a style reference
 6 |   <p "text-md text-gray-600 my-6">
 7 |   <button ="rounded-lg px-2 py-1 text-sm border-2">
 8 | 
 9 | 
10 | If you are asked to insert javascript do not do it. and only return with:
11 |   <div
12 |     class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-6 my-4"
13 |     role="alert">
14 |     <p class="font-bold">Javascript is not a allowed in this demo</p>
15 |   </div>
16 | 
17 | Request:
18 | ${command}
19 | 
20 | More tips:
21 | * Give each element an informative id to reference.
22 | * If you are asked to add a new section return the whole html snippet.
23 | * it is very important to add comments to explain your html
24 | 
25 | The last query you wrote was:
26 | ${currentHTML}
27 | 
28 | HTML:
29 | `;
30 |   return prompt;
31 | }
32 | 
33 | export const exampleQuestion = `
34 | Use the folowing structure, use flex to make the column structure whenever possible.
35 | 
36 | [[Header, Desc, Links][text area]] (this means two columns)
37 | [footer] (this means one column, but give the footer some space)
38 | 
39 | Left: should be a bold h2 thats very large "Magic Div" with a description of how it works (its a ai that takes your plain english and makes some html) but write this way better and use 3-4 sentences.
40 | Then add a smaller header that says "check out my other demos" and links to (/demo/text, /demo/div, /demo/sql)  as Magic x. Make sure each link has an underline class but keep it black.
41 | 
42 | Right: should be a text area with a button "Ask Magic", make the text area full sized
43 | 
44 | footer: should be some small text with a quote about advanced technology being like magic.`;
45 | 


--------------------------------------------------------------------------------
/magic-text/src/app/demo/layout.tsx:
--------------------------------------------------------------------------------
 1 | import Notification from "./components/Notification";
 2 | export default function RootLayout({
 3 |   children,
 4 | }: {
 5 |   children: React.ReactNode;
 6 | }) {
 7 |   return (
 8 |     <div className="max-w-5xl py-24 sm:py-32 m-auto text-black">
 9 |       <Notification />
10 |       {children}
11 |     </div>
12 |   );
13 | }
14 | 


--------------------------------------------------------------------------------
/magic-text/src/app/demo/sql/head.tsx:
--------------------------------------------------------------------------------
 1 | export default function Head() {
 2 |   return (
 3 |     <>
 4 |       <title>Magic SQL</title>
 5 |       <link rel="icon" href="/favicon.ico" />
 6 |       <meta name="description" content="Ask your new AI Analyist." />
 7 |       <meta property="og:description" content="Ask your new AI Analyist" />
 8 |       <meta property="og:title" content="Ask your new AI Analyist" />
 9 |       <meta name="twitter:title" content="Magic SQL" />
10 |       <meta name="twitter:description" content="Ask your new AI Analyist" />
11 |       <meta name="twitter:card" content="summary_large_image"></meta>
12 |       <meta
13 |         name="twitter:image"
14 |         content="https://cdn.discordapp.com/attachments/990816889657778196/1071941320052047953/CJ_EatinStarz_knight_Hacking_on_computer_matrix_071dc515-5af4-4911-a45f-2c2638863719.png"
15 |       ></meta>
16 |     </>
17 |   );
18 | }
19 | 


--------------------------------------------------------------------------------
/magic-text/src/app/demo/sql/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useRef, useState } from "react";
  4 | import SyntaxHighlighter from "react-syntax-highlighter";
  5 | import TitleCard from "../components/TitleCard";
  6 | import { makePrompt } from "./prompt";
  7 | 
  8 | const sampleSchema = `
  9 | CREATE TABLE Customers (
 10 |     customer_id INT PRIMARY KEY,
 11 |     first_name VARCHAR(50),
 12 |     last_name VARCHAR(50),
 13 |     email VARCHAR(100),
 14 |     created_at DATE
 15 | );
 16 | 
 17 | CREATE TABLE Orders (
 18 |     order_id INT PRIMARY KEY,
 19 |     customer_id INT,
 20 |     order_total DECIMAL(10,2),
 21 |     order_date DATE,
 22 |     FOREIGN KEY (customer_id) REFERENCES Customers(customer_id)
 23 | );
 24 | 
 25 | CREATE TABLE Products (
 26 |     product_id INT PRIMARY KEY,
 27 |     product_name VARCHAR(100)`.trim();
 28 | 
 29 | const sampleQuery = `SELECT Count(1) FROM Customers;`;
 30 | 
 31 | export default function Home() {
 32 |   const [loading, setLoading] = useState(false);
 33 |   const [schema, setSchema] = useState(sampleSchema);
 34 |   const [sqlQuery, setQuery] = useState(sampleQuery);
 35 |   const questionRef = useRef<any>();
 36 | 
 37 |   const generateFillin = async (e: any) => {
 38 |     e.preventDefault();
 39 | 
 40 |     const prompt = makePrompt(questionRef.current!.value, schema, sqlQuery);
 41 | 
 42 |     setLoading(true);
 43 |     const response = await fetch("/api/generate", {
 44 |       method: "POST",
 45 |       headers: {
 46 |         "Content-Type": "application/json",
 47 |       },
 48 |       body: JSON.stringify({
 49 |         prompt,
 50 |       }),
 51 |     });
 52 |     console.log("Edge function returned.");
 53 |     console.log(response);
 54 | 
 55 |     if (!response.ok) {
 56 |       throw new Error(response.statusText);
 57 |     }
 58 | 
 59 |     // This data is a ReadableStream
 60 |     const data = response.body;
 61 |     if (!data) {
 62 |       return;
 63 |     }
 64 | 
 65 |     const reader = data.getReader();
 66 |     const decoder = new TextDecoder();
 67 |     let done = false;
 68 |     var _fillText = "";
 69 |     while (!done) {
 70 |       const { value, done: doneReading } = await reader.read();
 71 |       done = doneReading;
 72 |       const chunkValue = decoder.decode(value);
 73 |       _fillText += chunkValue;
 74 |       setQuery(_fillText.trim());
 75 |     }
 76 | 
 77 |     if (_fillText.startsWith("ALTER TABLE")) {
 78 |       setSchema(schema + "\n\n" + _fillText);
 79 |     }
 80 | 
 81 |     if (_fillText.startsWith("CREATE TABLE")) {
 82 |       setSchema(schema + "\n\n" + _fillText);
 83 |     }
 84 | 
 85 |     setLoading(false);
 86 |   };
 87 | 
 88 |   return (
 89 |     <>
 90 |       <TitleCard
 91 |         title="SQL"
 92 |         description="Input a json schema and the magic will fill in the data by asking
 93 |         questions and setting values using the SET command. This set command
 94 |         manipulates the a json object in memory called `profile` feel free to
 95 |         inspect and log this object. One can imagine this form of thinking and
 96 |         action can be used to build a chatbot or other conversational AI that
 97 |         can change the state of the browser session in more complex ways."
 98 |       />
 99 | 
100 |       <textarea
101 |         value={schema}
102 |         onChange={(e) => setSchema(e.target.value)}
103 |         rows={10}
104 |         cols={50}
105 |         disabled={loading}
106 |         className="font-mono w-full rounded-md text-xs border-gray-100 bg-gray-50 shadow-md p-6 border-2 disabled:opacity-60"
107 |       />
108 | 
109 |       <SyntaxHighlighter
110 |         wrapLongLines={true}
111 |         language="sql"
112 |         className="mt-6 p-6 rounded-md"
113 |       >
114 |         {sqlQuery}
115 |       </SyntaxHighlighter>
116 | 
117 |       <div className="flex mt-6 space-x-3">
118 |         <input
119 |           type="text"
120 |           ref={questionRef}
121 |           placeholder="how many customers do we have?"
122 |           disabled={loading}
123 |           className="flex-1 rounded-lg text-md border-gray-00  text-gray-900 bg-gray-50 p-2 border-2 disabled:opacity-60"
124 |         />
125 |         <button
126 |           onClick={(e) => generateFillin(e)}
127 |           disabled={loading}
128 |           className="flex-none mr-2 rounded-lg px-4 py-2 text-md  font-medium text-gray-900 bg-gray-50 hover:bg-gray-100 border border-gray-200 disabled:opacity-60"
129 |         >
130 |           Ask Magic
131 |         </button>
132 |       </div>
133 |     </>
134 |   );
135 | }
136 | 


--------------------------------------------------------------------------------
/magic-text/src/app/demo/sql/prompt.tsx:
--------------------------------------------------------------------------------
 1 | export function makePrompt(
 2 |   question: string,
 3 |   schema: string,
 4 |   currentQuery: string
 5 | ) {
 6 |   const date = new Date().toDateString();
 7 | 
 8 |   const prompt = `
 9 | You are a data scientist that helps your coworkers to answer questins about the data.
10 | You will be given a scheme and a question to answer. Reply only with the SQL query that answers the question.
11 | But leave comments inline to help your coworkers understand your thought process.
12 | 
13 | If the question cannot be answered response with a sql comment explaining why.
14 | and suggest what data you might need to connect to answer the question.
15 | 
16 | The data you have access to has the following schema:
17 | 
18 | Schemas:
19 | ${schema}
20 | 
21 | Example:
22 | 
23 | Question: What is the minimum value of column b for each value of column a?
24 | SQL Query: 
25 | SELECT 
26 |   table.a
27 |  , min(table2.b)
28 | FROM table
29 | -- Join the two tables to get the data we need
30 | -- we need to filter the data to only get the data we need
31 | LEFT JOIN ON table2.id = table.id
32 | WHERE table2.id = 1
33 | GROUP BY 1
34 | 
35 | Question: how many kinds cars are on the moon?
36 | SQL Query:
37 | -- I don't know how to answer this question
38 | -- maybe if we had data about the moon we could answer this question
39 | 
40 | The date is ${date}
41 | 
42 | Question:
43 | ${question}
44 | 
45 | The last query you wrote was:
46 | ${currentQuery}
47 | 
48 | SQL Query:
49 | `;
50 |   return prompt;
51 | }
52 | 


--------------------------------------------------------------------------------
/magic-text/src/app/demo/survey/head.tsx:
--------------------------------------------------------------------------------
 1 | export default function Head() {
 2 |   return (
 3 |     <>
 4 |       <title>Magic Survey</title>
 5 |       <link rel="icon" href="/favicon.ico" />
 6 |       <meta
 7 |         name="description"
 8 |         content="Fill in a schema with data using conversational ai."
 9 |       />
10 |       <meta
11 |         property="og:description"
12 |         content="Fill in a schema with data using conversational ai."
13 |       />
14 |       <meta
15 |         property="og:title"
16 |         content="Fill in a schema with data using conversational ai."
17 |       />
18 |       <meta name="twitter:title" content="Magic SQL" />
19 |       <meta
20 |         name="twitter:description"
21 |         content="Fill in a schema with data using conversational ai."
22 |       />
23 |       <meta name="twitter:card" content="summary_large_image"></meta>
24 |       <meta
25 |         name="twitter:image"
26 |         content="https://cdn.discordapp.com/attachments/990816889657778196/1071941320052047953/CJ_EatinStarz_knight_Hacking_on_computer_matrix_071dc515-5af4-4911-a45f-2c2638863719.png"
27 |       ></meta>
28 |     </>
29 |   );
30 | }
31 | 


--------------------------------------------------------------------------------
/magic-text/src/app/demo/survey/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useState } from "react";
  4 | import SyntaxHighlighter from "react-syntax-highlighter";
  5 | import TitleCard from "../components/TitleCard";
  6 | import { makePrompt, exampleSchema } from "./prompt";
  7 | 
  8 | export default function Home() {
  9 |   const [loading, setLoading] = useState(false);
 10 |   const [schema, setSchema] = useState(exampleSchema);
 11 |   const [profile, setProfile] = useState({});
 12 |   const [reply, setReply] = useState("Lets get started!");
 13 |   const [history, setHistory] = useState("");
 14 | 
 15 |   const generateFillin = async (e: any) => {
 16 |     e.preventDefault;
 17 | 
 18 |     if (reply === "") {
 19 |       return;
 20 |     }
 21 | 
 22 |     const _history = history + "\nUser: " + reply;
 23 |     setHistory(_history);
 24 | 
 25 |     const prompt = makePrompt(
 26 |       JSON.stringify(schema),
 27 |       JSON.stringify(profile),
 28 |       _history
 29 |     );
 30 | 
 31 |     console.log("Prompt: " + prompt);
 32 | 
 33 |     var _fillText = "";
 34 | 
 35 |     setLoading(true);
 36 |     const response = await fetch("/api/generate", {
 37 |       method: "POST",
 38 |       headers: {
 39 |         "Content-Type": "application/json",
 40 |       },
 41 |       body: JSON.stringify({
 42 |         prompt: prompt,
 43 |         stop: ["User:"],
 44 |       }),
 45 |     });
 46 |     console.log("Edge function returned.");
 47 |     console.log(response);
 48 | 
 49 |     if (!response.ok) {
 50 |       throw new Error(response.statusText);
 51 |     }
 52 | 
 53 |     // This data is a ReadableStream
 54 |     const data = response.body;
 55 |     if (!data) {
 56 |       return;
 57 |     }
 58 | 
 59 |     const reader = data.getReader();
 60 |     const decoder = new TextDecoder();
 61 |     let done = false;
 62 | 
 63 |     while (!done) {
 64 |       const { value, done: doneReading } = await reader.read();
 65 |       done = doneReading;
 66 |       const chunkValue = decoder.decode(value);
 67 |       _fillText += chunkValue;
 68 |       setHistory(_history + "\n" + _fillText.trim());
 69 |     }
 70 | 
 71 |     // use reges to extract the set comments like `SET property <value>`
 72 |     var _profile = profile as { [x: string]: any };
 73 |     const setRegex = /SET\s+([a-zA-Z0-9._-]+)\s+(.*)/g;
 74 |     const setMatches = _fillText.matchAll(setRegex);
 75 |     for (const match of setMatches as any) {
 76 |       const key = match[1];
 77 |       const value = match[2] as string;
 78 |       _profile[key] = value;
 79 |       console.log("setting profile:", _profile);
 80 |       setProfile(_profile);
 81 |     }
 82 | 
 83 |     setLoading(false);
 84 |   };
 85 | 
 86 |   return (
 87 |     <>
 88 |       <TitleCard
 89 |         title="Survey"
 90 |         description="Input a json schema and the magic will fill in the data by asking
 91 |         questions and setting values using the SET command. This set command
 92 |         manipulates the a json object in memory called `profile` feel free to
 93 |         inspect and log this object. One can imagine this form of thinking and
 94 |         action can be used to build a chatbot or other conversational AI that
 95 |         can change the state of the browser session in more complex ways."
 96 |       />
 97 | 
 98 |       <textarea
 99 |         value={JSON.stringify(schema, null, 2)}
100 |         onChange={(e) => {
101 |           setSchema(JSON.parse(e.target.value));
102 |         }}
103 |         rows={10}
104 |         cols={50}
105 |         disabled={loading}
106 |         className="font-mono w-full rounded-md text-xs border-gray-100 bg-gray-50 shadow-md p-6 border-2 disabled:opacity-60"
107 |       />
108 |       <SyntaxHighlighter
109 |         wrapLongLines={true}
110 |         language="txt"
111 |         className="mt-6 p-6 rounded-md"
112 |       >
113 |         {history.trim()}
114 |       </SyntaxHighlighter>
115 |       <div className="flex mt-6 space-x-3">
116 |         <input
117 |           value={reply}
118 |           disabled={loading}
119 |           className="flex-1 rounded-lg text-md border-gray-00  text-gray-900 bg-gray-50 p-2 border-2 disabled:opacity-60"
120 |           onChange={(e) => {
121 |             setReply(e.target.value);
122 |           }}
123 |         />
124 |         <button
125 |           onClick={(e) => {
126 |             generateFillin(e);
127 |             setReply("");
128 |           }}
129 |           disabled={loading}
130 |           className="flex-none mr-2 rounded-lg px-4 py-2 text-md  font-medium text-gray-900 bg-gray-50 hover:bg-gray-100 border border-gray-200 disabled:opacity-60"
131 |         >
132 |           Reply
133 |         </button>
134 |       </div>
135 |       <SyntaxHighlighter
136 |         wrapLongLines={true}
137 |         language="json"
138 |         className="mt-6 p-6 rounded-md"
139 |       >
140 |         {JSON.stringify(profile, null, 2)}
141 |       </SyntaxHighlighter>
142 |     </>
143 |   );
144 | }
145 | 


--------------------------------------------------------------------------------
/magic-text/src/app/demo/survey/prompt.tsx:
--------------------------------------------------------------------------------
 1 | export function makePrompt(
 2 |   schema: string,
 3 |   currentProfile: string,
 4 |   history: string
 5 | ) {
 6 |   const prompt = `
 7 | You are an AI assistant namedtasked to fill in this schema.
 8 | Your tone is helpful, casual, and friendly. 
 9 | 
10 | ${schema}
11 | 
12 | You have the ability to use a tool called SET that sets a value in the user's profile.
13 |     SET properties.key.key value 
14 | 
15 | Currently the user's profile looks like this you job is to set values in the user's profile:
16 | 
17 | ${currentProfile}
18 | 
19 | It is important to think first and then act. You can use the history to help you think.
20 | Make sure you set the user's profile after they respond
21 | 
22 | This this format:
23 | 
24 | User: Lets get started
25 | Thought: you should always think about what to do, before you do it.
26 | Assistant: Got it! <asks a question anad waits for a response> 
27 | 
28 | User: response
29 | Thought: User responded with answer. Set value and ask next question.
30 | SET properties.key.key value
31 | Assistant: Got it! <asks a question anad waits for a response>
32 | <-- this block can happen multiple times make sure to set attributes imediately after a response-->
33 | 
34 | 
35 | Assistant: Great we're all done here! 
36 | 
37 | Reemeber You must think first.
38 | 
39 | Begin! 
40 | ${history}
41 | `;
42 |   return prompt;
43 | }
44 | 
45 | export const exampleSchema = {
46 |   $schema: "http://json-schema.org/draft-07/schema#",
47 |   title: "Feedback Survey for Clothing Checkouts",
48 |   type: "object",
49 |   properties: {
50 |     fit: {
51 |       type: "string",
52 |       enum: ["Too small", "Just right", "Too big"],
53 |     },
54 |     style: {
55 |       type: "string",
56 |       enum: ["Loved it", "Ok", "Did not like it"],
57 |     },
58 |     price: {
59 |       type: "string",
60 |       enum: ["Expensive", "Fair", "Cheap"],
61 |     },
62 |   },
63 |   required: ["fit", "style", "price"],
64 | };
65 | 


--------------------------------------------------------------------------------
/magic-text/src/app/demo/text/components.tsx:
--------------------------------------------------------------------------------
 1 | import { motion, AnimatePresence } from "framer-motion";
 2 | import { PromptType } from "./prompt";
 3 | 
 4 | export const minSelectionLength = 50;
 5 | 
 6 | export function Warning({ isWarn }: { isWarn: boolean }) {
 7 |   return (
 8 |     <AnimatePresence>
 9 |       {isWarn && (
10 |         <motion.div
11 |           initial={{ opacity: 0, scale: 0.5 }}
12 |           animate={{ opacity: 1, scale: 1 }}
13 |           exit={{ opacity: 0 }}
14 |           className="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-6 my-4"
15 |           role="alert"
16 |         >
17 |           <p className="font-bold">Selection too short</p>
18 |           <p>
19 |             In order for magic text to work well we will need more than{" "}
20 |             {minSelectionLength}
21 |             &nbsp; characters selected.
22 |           </p>
23 |         </motion.div>
24 |       )}
25 |     </AnimatePresence>
26 |   );
27 | }
28 | 
29 | export function BrushMenu({
30 |   isLoading,
31 |   onClick,
32 |   isOpen,
33 | }: {
34 |   isLoading: boolean;
35 |   onClick: any;
36 |   isOpen: boolean;
37 | }) {
38 |   // this is a function component that returns a single button for each brush
39 |   function BrushButton({
40 |     key,
41 |     promptType,
42 |   }: {
43 |     key: number;
44 |     promptType: string;
45 |   }) {
46 |     return (
47 |       <motion.button
48 |         key={key}
49 |         whileTap={{ scale: 0.95 }}
50 |         disabled={isLoading}
51 |         className="mr-2 rounded-lg px-4 py-2 text-sm shadow-sm font-medium text-gray-900 bg-gray-50 hover:bg-gray-100 border border-gray-200 disabled:opacity-60"
52 |         onClick={(e) => {
53 |           onClick(e, PromptType[promptType as keyof typeof PromptType]);
54 |         }}
55 |       >
56 |         {promptType}
57 |       </motion.button>
58 |     );
59 |   }
60 | 
61 |   return (
62 |     <AnimatePresence>
63 |       {isOpen && (
64 |         <motion.div
65 |           className=" bg-gray-50 shadow-lg rounded-md p-6 my-4 max-w-none border-2 border-gray-100"
66 |           initial={{ opacity: 0 }}
67 |           animate={{ opacity: 1 }}
68 |           exit={{ opacity: 0 }}
69 |           role="group"
70 |         >
71 |           <h2 className="text-sm font-medium mb-1">Text Brushes</h2>
72 |           <p className="text-sm text-gray-600 mb-4">
73 |             Apply any brush to the text you&apos;ve selected to use text magic
74 |             to improve your writing instantly.
75 |           </p>
76 |           <div>
77 |             {Object.keys(PromptType).map((promptType, idx) => (
78 |               <BrushButton key={idx} promptType={promptType} />
79 |             ))}
80 |           </div>
81 |         </motion.div>
82 |       )}
83 |     </AnimatePresence>
84 |   );
85 | }
86 | 


--------------------------------------------------------------------------------
/magic-text/src/app/demo/text/head.tsx:
--------------------------------------------------------------------------------
 1 | export default function Head() {
 2 |   return (
 3 |     <>
 4 |       <title>Magic Text</title>
 5 |       <link rel="icon" href="/favicon.ico" />
 6 |       <meta name="twitter:card" content="summary_large_image"></meta>
 7 |       <meta
 8 |         name="description"
 9 |         content="Watch your text transform into something new."
10 |       />
11 |       <meta
12 |         property="og:description"
13 |         content="Watch your text transform into something new."
14 |       />
15 |       <meta property="og:title" content="Magic text brushes" />
16 |       <meta name="twitter:title" content="Magic text brushes" />
17 |       <meta
18 |         name="twitter:description"
19 |         content="Watch your text transform into something new.."
20 |       />
21 |       <meta name="twitter:card" content="summary_large_image"></meta>
22 |       <meta
23 |         name="twitter:image"
24 |         content="https://cdn.discordapp.com/attachments/990816889657778196/1071941320052047953/CJ_EatinStarz_knight_Hacking_on_computer_matrix_071dc515-5af4-4911-a45f-2c2638863719.png"
25 |       ></meta>
26 |     </>
27 |   );
28 | }
29 | 


--------------------------------------------------------------------------------
/magic-text/src/app/demo/text/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { SyntheticEvent, useState } from "react";
  4 | import { PromptType, makePrompt } from "./prompt";
  5 | import { BrushMenu, Warning, minSelectionLength } from "./components";
  6 | import Link from "next/link";
  7 | import TitleCard from "../components/TitleCard";
  8 | 
  9 | export default function Home() {
 10 |   const [textBox, setTextBox] = useState(
 11 |     "I am a Data Scientist/Machine Learning Engineer with 8+ years of experience in Python and related Data/ML tools. In the past, I spent my time working with organizations such as Stitchfix, Meta, and NYU Global Institute of Public Health. I happen to a degree in Computational Mathematics & Statistics from the University of Waterloo.\n\nThanks for checking out this demo, please reach out with any questions at jason at jxnl dot co.  \n\nThese days, I've been learning Javascript, this app took me about 8 hours and uses Vercel Edge Functions, Next.js, and OpenAI GPT models. I also like to play the trumpet, freedive, pottery, and jiujitsu so if you're into any of those things, let's connect on twitter @jxnl.co"
 12 |   );
 13 |   const [warn, setWarn] = useState(false);
 14 |   const [menuOpen, setMenuOpen] = useState(false);
 15 |   const [loading, setLoading] = useState(false);
 16 |   const [selectStart, setSelectStart] = useState(0);
 17 |   const [selectEnd, setSelectEnd] = useState(0);
 18 | 
 19 |   const generateFillin = async (e: any, promptType: PromptType) => {
 20 |     e.preventDefault();
 21 | 
 22 |     const prefix = textBox.substring(0, selectStart);
 23 |     const suffix = textBox.substring(selectEnd, textBox.length);
 24 |     const selectedText = textBox.substring(selectStart, selectEnd);
 25 | 
 26 |     // if the selection is too short, warn the user
 27 |     if (selectedText.length < minSelectionLength) {
 28 |       setWarn(true);
 29 |       return;
 30 |     }
 31 | 
 32 |     // after the button click, the selection is reset so multiple
 33 |     // clicks can be made without having to reselect the text
 34 |     var _fillText = "";
 35 |     var _textBox = textBox;
 36 |     setSelectStart(0);
 37 |     setSelectEnd(0);
 38 |     setLoading(true);
 39 | 
 40 |     const prompt = makePrompt({
 41 |       promptType: promptType,
 42 |       text: selectedText,
 43 |     });
 44 | 
 45 |     if (prompt.length < minSelectionLength) {
 46 |       console.warn("Prompt is too short. Returning text.");
 47 |       setWarn(true);
 48 |       return;
 49 |     }
 50 | 
 51 |     const response = await fetch("/api/generate", {
 52 |       method: "POST",
 53 |       headers: {
 54 |         "Content-Type": "application/json",
 55 |       },
 56 |       body: JSON.stringify({
 57 |         prompt,
 58 |       }),
 59 |     });
 60 |     console.log("Edge function returned.");
 61 |     console.log(response);
 62 | 
 63 |     if (!response.ok) {
 64 |       throw new Error(response.statusText);
 65 |     }
 66 | 
 67 |     // This data is a ReadableStream
 68 |     const data = response.body;
 69 |     if (!data) {
 70 |       return;
 71 |     }
 72 | 
 73 |     const reader = data.getReader();
 74 |     const decoder = new TextDecoder();
 75 |     let done = false;
 76 | 
 77 |     while (!done) {
 78 |       const { value, done: doneReading } = await reader.read();
 79 |       done = doneReading;
 80 |       const chunkValue = decoder.decode(value);
 81 |       _fillText += chunkValue;
 82 |       _textBox = prefix + _fillText + suffix;
 83 |       setTextBox(_textBox.trim());
 84 |     }
 85 |     setLoading(false);
 86 |     setSelectStart(0);
 87 |     setSelectEnd(0);
 88 |     setMenuOpen(false);
 89 |   };
 90 | 
 91 |   // @ts-nocheck
 92 |   async function onSelection(
 93 |     event: SyntheticEvent<HTMLTextAreaElement, Event>
 94 |   ) {
 95 |     // used to determine if we should show the menu
 96 |     // and if the selection is long enough and warn the user
 97 |     const target = event.target as HTMLInputElement;
 98 | 
 99 |     const selection = target.value.substring(
100 |       target.selectionStart || 0,
101 |       target.selectionEnd || 0
102 |     );
103 |     // cannot be accessed until the button click
104 |     // for some reason its not updating the state in this scope
105 |     setSelectStart(target.selectionStart || 0);
106 |     setSelectEnd(target.selectionEnd || 0);
107 | 
108 |     if (selection) {
109 |       if (selection.toString().length < minSelectionLength) {
110 |         setWarn(true);
111 |         setMenuOpen(false);
112 |       } else {
113 |         setMenuOpen(true);
114 |         setWarn(false);
115 |       }
116 |     } else {
117 |       setWarn(false);
118 |       setMenuOpen(false);
119 |     }
120 |   }
121 | 
122 |   return (
123 |     <>
124 |       <TitleCard
125 |         title="Text"
126 |         description="
127 |         Simply highlight any text in the text area, and you'll be able to
128 |         see the brush options in real time. No need to wait for any loading
129 |         spinners, as Magic will immediately begin rewriting your selection to
130 |         your specifications.
131 |         "
132 |       />
133 |       <textarea
134 |         value={textBox}
135 |         onChange={(e) => setTextBox(e.target.value)}
136 |         onSelect={(e) => onSelection(e)}
137 |         rows={10}
138 |         cols={50}
139 |         disabled={loading}
140 |         className="w-full rounded-md text-sm border-gray-100 bg-gray-50 shadow-md p-6 border-2 disabled:opacity-60"
141 |       />
142 | 
143 |       <BrushMenu
144 |         isLoading={loading}
145 |         onClick={generateFillin}
146 |         isOpen={menuOpen}
147 |       />
148 |       <Warning isWarn={warn} />
149 |     </>
150 |   );
151 | }
152 | 


--------------------------------------------------------------------------------
/magic-text/src/app/demo/text/prompt.tsx:
--------------------------------------------------------------------------------
 1 | export enum PromptType {
 2 |   Formal = "Formal",
 3 |   Casual = "Casual",
 4 |   Longer = "Longer",
 5 |   Shorter = "Shorter",
 6 |   Polite = "Polite",
 7 |   Pirate = "Pirate",
 8 | }
 9 | 
10 | export function makePrompt({
11 |   promptType,
12 |   text,
13 | }: {
14 |   promptType: PromptType;
15 |   text: string;
16 | }) {
17 |   if (promptType === PromptType.Formal) {
18 |     return `Rewrite this text in a formal tone suitable for a office setting: \n\n${text} \n\nRewrite:`;
19 |   } else if (promptType === PromptType.Casual) {
20 |     return `Rewrite this text in a casual tone suitable for a friend: \n\n${text} \n\nRewrite:`;
21 |   } else if (promptType === PromptType.Pirate) {
22 |     return `Rewrite this text in a pirate's voice Arr!: \n\n${text} \n\nRewrite:`;
23 |   } else if (promptType === PromptType.Longer) {
24 |     return `Rewrite this text as a longer piece of text, add 3-4 more sentences and use sophisticated language: \n\n${text} \n\nRewrite:`;
25 |   } else if (promptType === PromptType.Shorter) {
26 |     return `Rewrite this text shorter, be concise but informative: \n\n${text} \n\nRewrite:`;
27 |   } else if (promptType === PromptType.Polite) {
28 |     return `Rewrite this text in a polite tone: \n\n${text} \n\nRewrite:`;
29 |   } else {
30 |     // if no prompt type is specified, return the text and warn the user
31 |     console.warn("No prompt type specified. Returning text.");
32 |     return text;
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/magic-text/src/app/demo/youtube/head.tsx:
--------------------------------------------------------------------------------
 1 | export default function Head() {
 2 |   return (
 3 |     <>
 4 |       <title>Magic Youtube</title>
 5 |       <link rel="icon" href="/favicon.ico" />
 6 |       <meta
 7 |         name="description"
 8 |         content="Turn video content into a mBringing together the worlds of video content and note-taking, Magic YouTube is the ultimate tool for extracting knowledge from online resources."
 9 |       />
10 |       <meta
11 |         property="og:description"
12 |         content="Bringing together the worlds of video content and note-taking, Magic YouTube is the ultimate tool for extracting knowledge from online resources."
13 |       />
14 |       <meta
15 |         property="og:title"
16 |         content="Bringing together the worlds of video content and note-taking, Magic YouTube is the ultimate tool for extracting knowledge from online resources."
17 |       />
18 |       <meta name="twitter:title" content="Magic Youtube" />
19 |       <meta
20 |         name="twitter:description"
21 |         content="Bringing together the worlds of video content and note-taking, Magic YouTube is the ultimate tool for extracting knowledge from online resources."
22 |       />
23 |       <meta name="twitter:card" content="summary_large_image"></meta>
24 |       <meta
25 |         name="twitter:image"
26 |         content="https://cdn.discordapp.com/attachments/990816889657778196/1071941320052047953/CJ_EatinStarz_knight_Hacking_on_computer_matrix_071dc515-5af4-4911-a45f-2c2638863719.png"
27 |       ></meta>
28 |     </>
29 |   );
30 | }
31 | 


--------------------------------------------------------------------------------
/magic-text/src/app/demo/youtube/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useEffect, useState } from "react";
  4 | import { ReactMarkdown } from "react-markdown/lib/react-markdown";
  5 | import { useSearchParams } from "next/navigation";
  6 | 
  7 | import { ToastContainer, toast } from "react-toastify";
  8 | import "react-toastify/dist/ReactToastify.css";
  9 | import TitleCard from "../components/TitleCard";
 10 | import {
 11 |   parseChaptersFromSummary,
 12 |   cachedSummary,
 13 |   isValidYoutubeUrl,
 14 |   extractVideoId,
 15 | } from "./utils";
 16 | import { Youtube } from "./youtube";
 17 | 
 18 | export const dynamic = "force-dynamic";
 19 | 
 20 | function Button(props: { loading: boolean; onClick: any; name: string }) {
 21 |   const { loading, onClick, name } = props;
 22 |   return (
 23 |     <button
 24 |       disabled={loading}
 25 |       onClick={onClick}
 26 |       className="flex-none mr-2 rounded-lg px-4 py-2 text-md  font-medium text-gray-900 bg-gray-50 hover:bg-gray-100 border border-gray-200 disabled:opacity-60"
 27 |     >
 28 |       {name}
 29 |     </button>
 30 |   );
 31 | }
 32 | 
 33 | export default function Home() {
 34 |   const [loading, setLoading] = useState(false);
 35 |   const [summary, setSummary] = useState("");
 36 |   const [started, setStart] = useState(false);
 37 |   const [url, setUrl] = useState("");
 38 |   const [ts, setTs] = useState(0);
 39 | 
 40 |   function LinkRenderer(props: any) {
 41 |     const href = props.href;
 42 | 
 43 |     // extract the ts from the youtube href
 44 |     // t=1234s where ts = 1234
 45 |     const regex = new RegExp("t=(\\d+)s");
 46 |     const _ts = parseInt(href.match(regex)[1]);
 47 | 
 48 |     return (
 49 |       <a
 50 |         className="no-underline hover:opacity-80"
 51 |         onClick={() => {
 52 |           setTs(_ts);
 53 |         }}
 54 |       >
 55 |         #
 56 |       </a>
 57 |     );
 58 |   }
 59 | 
 60 |   const generateSummary = async (e: any) => {
 61 |     e.preventDefault;
 62 | 
 63 |     // use regex to check if url is youtube linke
 64 |     if (!isValidYoutubeUrl(url)) {
 65 |       toast.error("Please enter a valid youtube url");
 66 |       return;
 67 |     }
 68 | 
 69 |     setStart(true);
 70 |     setLoading(true);
 71 | 
 72 |     const response = await fetch("/api/summary", {
 73 |       method: "POST",
 74 |       headers: {
 75 |         "Content-Type": "application/json",
 76 |       },
 77 |       body: JSON.stringify({
 78 |         url,
 79 |       }),
 80 |     });
 81 |     console.log("Edge function returned.");
 82 |     console.log(response);
 83 | 
 84 |     if (!response.ok) {
 85 |       toast.error("Error generating summary.");
 86 |       setLoading(false);
 87 |       throw new Error(response.statusText);
 88 |     }
 89 | 
 90 |     // This data is a ReadableStream
 91 |     const data = response.body;
 92 |     if (!data) {
 93 |       return;
 94 |     }
 95 | 
 96 |     const reader = data.getReader();
 97 |     const decoder = new TextDecoder();
 98 |     let done = false;
 99 | 
100 |     while (!done) {
101 |       const { value, done: doneReading } = await reader.read();
102 |       done = doneReading;
103 |       const chunkValue = decoder.decode(value);
104 |       setSummary((prev) => (prev + chunkValue).trim());
105 |     }
106 | 
107 |     toast.success("Summary completed!");
108 |     setLoading(false);
109 |   };
110 | 
111 |   // I believe this is the same as componentDidMount
112 |   // if there is a videoId in the url, set the url to the videoId
113 |   // and check if there is a cached summary, if so, set the summary
114 |   // @ts-ignore
115 |   const videoId = useSearchParams().get("v");
116 |   useEffect(() => {
117 |     if (videoId) {
118 |       setUrl("https://www.youtube.com/watch?v=" + videoId);
119 |       setStart(true);
120 |       cachedSummary(videoId).then((res) => {
121 |         setSummary(res.summary_markdown);
122 |       });
123 |     }
124 |   }, []);
125 | 
126 |   return (
127 |     <>
128 |       <ToastContainer
129 |         position="top-right"
130 |         autoClose={1000}
131 |         hideProgressBar={false}
132 |         newestOnTop={true}
133 |         closeOnClick
134 |         rtl={false}
135 |         theme="light"
136 |       />
137 |       <TitleCard
138 |         title="Youtube"
139 |         description="
140 |           Generate a summary of a youtube video. Once the summary is generated, you can click on the chapter links to jump to that part of the video. 
141 |           If you want, copy the chapters and paste them into the youtube comments to create a table of contents for your video."
142 |       />
143 |       <div className="flex mt-6 space-x-3 mb-10">
144 |         <input
145 |           value={url}
146 |           disabled={loading}
147 |           placeholder="https://www.youtube.com/watch?v=12345678"
148 |           className="flex-1 rounded-lg text-md border-gray-00  text-gray-900 bg-gray-50 p-2 border-2 disabled:opacity-60"
149 |           onChange={(e) => {
150 |             setUrl(e.target.value);
151 |           }}
152 |         />
153 |         <Button loading={loading} name="Generate" onClick={generateSummary} />
154 |       </div>
155 |       {started ? (
156 |         <>
157 |           <hr className="h-px my-10 bg-gray-200 border-0"></hr>
158 |           <Youtube url={url} ts={ts} />
159 |           <hr className="h-px my-10 bg-gray-200 border-0"></hr>
160 |           {/* 
161 |           I use react markdown to render the summary, and I use a custom link renderer to render the [00:00:00](url) 
162 |           as a link that will set the timestamp in the youtube video so it looks like `# title` where # is a blue link
163 |           using tailwind prose to style the markdown is also very nice.
164 |           */}
165 |           <article className="prose prose-headings:text-2xl prose-blue w-full border-red-100">
166 |             <ReactMarkdown
167 |               components={{
168 |                 a: LinkRenderer,
169 |               }}
170 |             >
171 |               {summary}
172 |             </ReactMarkdown>
173 |           </article>
174 |           <hr className="h-px my-10 bg-gray-200 border-0"></hr>
175 |           <div className="flex mt-6 space-x-3 mb-10">
176 |             <Button
177 |               name="Copy"
178 |               loading={loading}
179 |               onClick={() => {
180 |                 if (summary.length === 0) {
181 |                   toast.error("Please generate a summary first");
182 |                   return;
183 |                 }
184 |                 navigator.clipboard.writeText(summary);
185 |                 toast.success("Copied to clipboard!");
186 |               }}
187 |             />
188 |             {/* 
189 |               I also have a button to copy the chapters to the clipboard, which is just the titles of the summary
190 |               Which is useful for people who want to copy the chapters and leave a comment on the video. 
191 |               When they do that, the chapters will automatically allow other users to jump to that chapter. (on youtube)
192 |             */}
193 |             <Button
194 |               name="Copy Chapters"
195 |               loading={loading}
196 |               onClick={() => {
197 |                 if (summary.length === 0) {
198 |                   toast.error("Please generate a summary first");
199 |                   return;
200 |                 }
201 | 
202 |                 const chapters = parseChaptersFromSummary(summary);
203 |                 navigator.clipboard.writeText(
204 |                   chapters +
205 |                     `\n\nPowered by https://magic.jxnl.co/demo/youtube?v=${extractVideoId(
206 |                       url
207 |                     )}`
208 |                 );
209 |                 toast.success("Copied to clipboard!");
210 |               }}
211 |             />
212 |             <Button
213 |               name="Share"
214 |               loading={loading}
215 |               onClick={() => {
216 |                 if (summary.length === 0) {
217 |                   toast.error("Please generate a summary first");
218 |                   return;
219 |                 }
220 |                 const videoId = extractVideoId(url);
221 |                 navigator.clipboard.writeText(
222 |                   `https://magic.jxnl.co/demo/youtube?v=${videoId}`
223 |                 );
224 |                 toast.success("Link copied to clipboard!");
225 |               }}
226 |             />
227 |           </div>
228 |         </>
229 |       ) : null}
230 |     </>
231 |   );
232 | }
233 | 


--------------------------------------------------------------------------------
/magic-text/src/app/demo/youtube/utils.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Parses chapters from summary
 3 |  * @param summary - summary to parse chapters from
 4 |  * @returns chapters in format "timestamp - title"
 5 |  */
 6 | export function parseChaptersFromSummary(summary: string) {
 7 |   var chapters = "";
 8 |   // iterate through lines and extract chapters
 9 |   for (const line of summary.split("\n")) {
10 |     // check if line is a chapter
11 |     if (line.startsWith("#")) {
12 |       // extract timestamp and title
13 |       const matches = line.match(/# \[(.*?)\]\(.*?\) (.*)/);
14 |       if (matches) {
15 |         chapters += `${matches[1]} - ${matches[2]}`;
16 |         chapters += "\n";
17 |       }
18 |     }
19 |   }
20 |   return chapters;
21 | }
22 | 
23 | /**
24 |  * Checks if summary is cached
25 |  * @param videoId - id of video to check
26 |  * @returns summary if cached, otherwise null
27 |  */
28 | export async function cachedSummary(videoId: string) {
29 |   console.log(`Checking for cached summary for ${videoId}...`);
30 |   return fetch("/api/cached_summary?v=" + videoId, {
31 |     next: { revalidate: 0 },
32 |     method: "GET",
33 |     headers: {
34 |       "Content-Type": "application/json",
35 |     },
36 |   })
37 |     .then((res) => res.json())
38 |     .catch((err) => console.log(err));
39 | }
40 | 
41 | /**
42 |  * Checks if a url is a valid youtube url
43 |  * @param url - url to check
44 |  */
45 | export function isValidYoutubeUrl(url: string) {
46 |   const linkRegex = new RegExp(
47 |     "^(https?:\\/\\/)?((w){3}.)?youtu(be|.be)?(\\.com)?\\/.+"
48 |   );
49 | 
50 |   return linkRegex.test(url);
51 | }
52 | 
53 | /**
54 |  * Extracts video id from youtube url
55 |  * @param url - url to extract video id from
56 |  * @returns
57 |  */
58 | export function extractVideoId(url: string) {
59 |   const videoId = url.match(
60 |     /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/
61 |   );
62 |   if (videoId === null) {
63 |     return null;
64 |   } else {
65 |     return videoId[1];
66 |   }
67 | }
68 | 


--------------------------------------------------------------------------------
/magic-text/src/app/demo/youtube/youtube.tsx:
--------------------------------------------------------------------------------
 1 | // react component to render a youtube video player
 2 | 
 3 | import React from "react";
 4 | import { extractVideoId } from "./utils";
 5 | 
 6 | export function Youtube(props: { url: string; ts: Number }) {
 7 |   const { url, ts } = props;
 8 |   const videoId = extractVideoId(url);
 9 | 
10 |   if (videoId === null) {
11 |     return <div>Invalid youtube url</div>;
12 |   }
13 | 
14 |   return (
15 |     <div>
16 |       <iframe
17 |         className="aspect-video w-full"
18 |         src={`https://www.youtube.com/embed/${videoId}?start=${ts}&autoplay=${
19 |           1 ? ts > 0 : 0
20 |         }`}
21 |         allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
22 |         allowFullScreen
23 |       />
24 |     </div>
25 |   );
26 | }
27 | 


--------------------------------------------------------------------------------
/magic-text/src/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: 222.2 84% 4.9%;
 9 | 
10 |     --muted: 210 40% 96.1%;
11 |     --muted-foreground: 215.4 16.3% 46.9%;
12 | 
13 |     --popover: 0 0% 100%;
14 |     --popover-foreground: 222.2 84% 4.9%;
15 | 
16 |     --card: 0 0% 100%;
17 |     --card-foreground: 222.2 84% 4.9%;
18 | 
19 |     --border: 214.3 31.8% 91.4%;
20 |     --input: 214.3 31.8% 91.4%;
21 | 
22 |     --primary: 222.2 47.4% 11.2%;
23 |     --primary-foreground: 210 40% 98%;
24 | 
25 |     --secondary: 210 40% 96.1%;
26 |     --secondary-foreground: 222.2 47.4% 11.2%;
27 | 
28 |     --accent: 210 40% 96.1%;
29 |     --accent-foreground: 222.2 47.4% 11.2%;
30 | 
31 |     --destructive: 0 84.2% 60.2%;
32 |     --destructive-foreground: 210 40% 98%;
33 | 
34 |     --ring: 215 20.2% 65.1%;
35 | 
36 |     --radius: 0.5rem;
37 |   }
38 | 
39 |   .dark {
40 |     --background: 222.2 84% 4.9%;
41 |     --foreground: 210 40% 98%;
42 | 
43 |     --muted: 217.2 32.6% 17.5%;
44 |     --muted-foreground: 215 20.2% 65.1%;
45 | 
46 |     --popover: 222.2 84% 4.9%;
47 |     --popover-foreground: 210 40% 98%;
48 | 
49 |     --card: 222.2 84% 4.9%;
50 |     --card-foreground: 210 40% 98%;
51 | 
52 |     --border: 217.2 32.6% 17.5%;
53 |     --input: 217.2 32.6% 17.5%;
54 | 
55 |     --primary: 210 40% 98%;
56 |     --primary-foreground: 222.2 47.4% 11.2%;
57 | 
58 |     --secondary: 217.2 32.6% 17.5%;
59 |     --secondary-foreground: 210 40% 98%;
60 | 
61 |     --accent: 217.2 32.6% 17.5%;
62 |     --accent-foreground: 210 40% 98%;
63 | 
64 |     --destructive: 0 62.8% 30.6%;
65 |     --destructive-foreground: 0 85.7% 97.3%;
66 | 
67 |     --ring: 217.2 32.6% 17.5%;
68 |   }
69 | }
70 | 
71 | @layer base {
72 |   * {
73 |     @apply border-border;
74 |   }
75 |   body {
76 |     @apply bg-background text-foreground;
77 |   }
78 | }


--------------------------------------------------------------------------------
/magic-text/src/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import "./globals.css";
 2 | import { AnalyticsWrapper } from "./demo/components/analytics";
 3 | import Header from "./components/Header";
 4 | import Footer from "./components/Footer";
 5 | 
 6 | const title = "Magic Playground";
 7 | const description =
 8 |   "Playground for text editing, studying video content, data analysis, and surveying. Powered by natural language processing.";
 9 | 
10 | export const metadata = {
11 |   title,
12 |   description,
13 |   keywords: [
14 |     "Youtube",
15 |     "Large Language Model",
16 |     "GPT-3",
17 |     "Vercel",
18 |     "Next.js",
19 |     "AI Text Editor",
20 |     "AI Data Analyst",
21 |   ],
22 |   colorScheme: "dark",
23 |   creator: "Jason Liu",
24 |   openGraph: {
25 |     title,
26 |     description,
27 |     images: [
28 |       {
29 |         url: "/welcome.png",
30 |         width: 800,
31 |         height: 600,
32 |       },
33 |     ],
34 |     locale: "en_US",
35 |     type: "website",
36 |   },
37 |   twitter: {
38 |     card: "summary_large_image",
39 |     title,
40 |     description,
41 |     creator: "@jxnlco",
42 |     images: ["/welcome.png"],
43 |   },
44 | };
45 | 
46 | export default function RootLayout({
47 |   children,
48 | }: {
49 |   children: React.ReactNode;
50 | }) {
51 |   return (
52 |     <html lang="en">
53 |       {/*
54 |         <head /> will contain the components returned by the nearest parent
55 |         head.tsx. Find out more at https://beta.nextjs.org/docs/api-reference/file-conventions/head
56 |       */}
57 |       <head />
58 | 
59 |       <body className="bg-white">
60 |         <Header />
61 |         {children}
62 |         <Footer />
63 |         <AnalyticsWrapper />
64 |       </body>
65 |     </html>
66 |   );
67 | }
68 | 


--------------------------------------------------------------------------------
/magic-text/src/app/page.tsx:
--------------------------------------------------------------------------------
 1 | import Hero from "./components/Hero";
 2 | import Links from "./components/MagicLinks";
 3 | 
 4 | export default function Home() {
 5 |   return (
 6 |     <>
 7 |       <Hero />
 8 |       <Links />;
 9 |     </>
10 |   );
11 | }
12 | 


--------------------------------------------------------------------------------
/magic-text/src/app/text/components.tsx:
--------------------------------------------------------------------------------
 1 | import { motion, AnimatePresence } from "framer-motion";
 2 | import { PromptType } from "./prompt";
 3 | 
 4 | export const minSelectionLength = 50;
 5 | 
 6 | export function Warning({ isWarn }: { isWarn: boolean }) {
 7 |   return (
 8 |     <AnimatePresence>
 9 |       {isWarn && (
10 |         <motion.div
11 |           initial={{ opacity: 0, scale: 0.5 }}
12 |           animate={{ opacity: 1, scale: 1 }}
13 |           exit={{ opacity: 0 }}
14 |           className="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-6 my-4"
15 |           role="alert"
16 |         >
17 |           <p className="font-bold">Selection too short</p>
18 |           <p>
19 |             In order for magic text to work well we will need more than{" "}
20 |             {minSelectionLength}
21 |             &nbsp; characters selected.
22 |           </p>
23 |         </motion.div>
24 |       )}
25 |     </AnimatePresence>
26 |   );
27 | }
28 | 
29 | export function BrushMenu({
30 |   isLoading,
31 |   onClick,
32 |   isOpen,
33 | }: {
34 |   isLoading: boolean;
35 |   onClick: any;
36 |   isOpen: boolean;
37 | }) {
38 |   // this is a function component that returns a single button for each brush
39 |   function BrushButton({
40 |     key,
41 |     promptType,
42 |   }: {
43 |     key: number;
44 |     promptType: string;
45 |   }) {
46 |     return (
47 |       <motion.button
48 |         key={key}
49 |         whileTap={{ scale: 0.95 }}
50 |         disabled={isLoading}
51 |         className="mr-2 rounded-lg px-4 py-2 text-sm shadow-sm font-medium text-gray-900 bg-gray-50 hover:bg-gray-100 border border-gray-200 disabled:opacity-60"
52 |         onClick={(e) => {
53 |           onClick(e, PromptType[promptType as keyof typeof PromptType]);
54 |         }}
55 |       >
56 |         {promptType}
57 |       </motion.button>
58 |     );
59 |   }
60 | 
61 |   return (
62 |     <AnimatePresence>
63 |       {isOpen && (
64 |         <motion.div
65 |           className=" bg-gray-50 shadow-lg rounded-md p-6 my-4 max-w-none border-2 border-gray-100"
66 |           initial={{ opacity: 0 }}
67 |           animate={{ opacity: 1 }}
68 |           exit={{ opacity: 0 }}
69 |           role="group"
70 |         >
71 |           <h2 className="text-sm font-medium mb-1">Text Brushes</h2>
72 |           <p className="text-sm text-gray-600 mb-4">
73 |             Apply any brush to the text you&apos;ve selected to use text magic
74 |             to improve your writing instantly.
75 |           </p>
76 |           <div>
77 |             {Object.keys(PromptType).map((promptType, idx) => (
78 |               <BrushButton key={idx} promptType={promptType} />
79 |             ))}
80 |           </div>
81 |         </motion.div>
82 |       )}
83 |     </AnimatePresence>
84 |   );
85 | }
86 | 


--------------------------------------------------------------------------------
/magic-text/src/app/text/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { SyntheticEvent, useState } from "react";
  4 | import { PromptType, makePrompt } from "./prompt";
  5 | import { BrushMenu, Warning, minSelectionLength } from "./components";
  6 | 
  7 | export default function Home() {
  8 |   const [textBox, setTextBox] = useState(
  9 |     "I am a Data Scientist/Machine Learning Engineer with 8+ years of experience in Python and related Data/ML tools. In the past, I spent my time working with organizations such as Stitchfix, Meta, and NYU Global Institute of Public Health. I happen to a degree in Computational Mathematics & Statistics from the University of Waterloo.\n\nThanks for checking out this demo, please reach out with any questions at jason at jxnl dot co.  \n\nThese days, I've been learning Javascript, this app took me about 8 hours and uses Vercel Edge Functions, Next.js, and OpenAI GPT models. I also like to play the trumpet, freedive, pottery, and jiujitsu so if you're into any of those things, let's connect on twitter @jxnl.co"
 10 |   );
 11 |   const [warn, setWarn] = useState(false);
 12 |   const [menuOpen, setMenuOpen] = useState(false);
 13 |   const [loading, setLoading] = useState(false);
 14 |   const [selectStart, setSelectStart] = useState(0);
 15 |   const [selectEnd, setSelectEnd] = useState(0);
 16 | 
 17 |   const generateFillin = async (e: any, promptType: PromptType) => {
 18 |     e.preventDefault();
 19 | 
 20 |     const prefix = textBox.substring(0, selectStart);
 21 |     const suffix = textBox.substring(selectEnd, textBox.length);
 22 |     const selectedText = textBox.substring(selectStart, selectEnd);
 23 | 
 24 |     // if the selection is too short, warn the user
 25 |     if (selectedText.length < minSelectionLength) {
 26 |       setWarn(true);
 27 |       return;
 28 |     }
 29 | 
 30 |     // after the button click, the selection is reset so multiple
 31 |     // clicks can be made without having to reselect the text
 32 |     var _fillText = "";
 33 |     var _textBox = textBox;
 34 |     setSelectStart(0);
 35 |     setSelectEnd(0);
 36 |     setLoading(true);
 37 | 
 38 |     const prompt = makePrompt({
 39 |       promptType: promptType,
 40 |       text: selectedText,
 41 |     });
 42 | 
 43 |     if (prompt.length < minSelectionLength) {
 44 |       console.warn("Prompt is too short. Returning text.");
 45 |       setWarn(true);
 46 |       return;
 47 |     }
 48 | 
 49 |     const response = await fetch("/api/generate", {
 50 |       method: "POST",
 51 |       headers: {
 52 |         "Content-Type": "application/json",
 53 |       },
 54 |       body: JSON.stringify({
 55 |         prompt,
 56 |       }),
 57 |     });
 58 |     console.log("Edge function returned.");
 59 |     console.log(response);
 60 | 
 61 |     if (!response.ok) {
 62 |       throw new Error(response.statusText);
 63 |     }
 64 | 
 65 |     // This data is a ReadableStream
 66 |     const data = response.body;
 67 |     if (!data) {
 68 |       return;
 69 |     }
 70 | 
 71 |     const reader = data.getReader();
 72 |     const decoder = new TextDecoder();
 73 |     let done = false;
 74 | 
 75 |     while (!done) {
 76 |       const { value, done: doneReading } = await reader.read();
 77 |       done = doneReading;
 78 |       const chunkValue = decoder.decode(value);
 79 |       _fillText += chunkValue;
 80 |       _textBox = prefix + _fillText + suffix;
 81 |       setTextBox(_textBox.trim());
 82 |     }
 83 |     setLoading(false);
 84 |     setSelectStart(0);
 85 |     setSelectEnd(0);
 86 |     setMenuOpen(false);
 87 |   };
 88 | 
 89 |   // @ts-nocheck
 90 |   async function onSelection(
 91 |     event: SyntheticEvent<HTMLTextAreaElement, Event>
 92 |   ) {
 93 |     // used to determine if we should show the menu
 94 |     // and if the selection is long enough and warn the user
 95 |     const target = event.target as HTMLInputElement;
 96 | 
 97 |     const selection = target.value.substring(
 98 |       target.selectionStart || 0,
 99 |       target.selectionEnd || 0
100 |     );
101 |     // cannot be accessed until the button click
102 |     // for some reason its not updating the state in this scope
103 |     setSelectStart(target.selectionStart || 0);
104 |     setSelectEnd(target.selectionEnd || 0);
105 | 
106 |     if (selection) {
107 |       if (selection.toString().length < minSelectionLength) {
108 |         setWarn(true);
109 |         setMenuOpen(false);
110 |       } else {
111 |         setMenuOpen(true);
112 |         setWarn(false);
113 |       }
114 |     } else {
115 |       setWarn(false);
116 |       setMenuOpen(false);
117 |     }
118 |   }
119 | 
120 |   return (
121 |     <>
122 |       <div className="mx-auto max-w-7xl lg:gap-x-8 lg:px-8 lg:max-w-6xl">
123 |         <div className="mx-auto w-full py-3 lg:w-3/5">
124 |           <div className="px-6 pt-10 pb-24 sm:pb-10  lg:px-0 lg:pt-20 lg:pb-10 6">
125 |             <h1 className="mt-12 text-4xl font-bold tracking-tight text-gray-900 sm:mt-10 sm:text-6xl">
126 |               Magic Text Brushes
127 |             </h1>
128 |             <p className="mt-6 text-lg leading-8 text-gray-600">
129 |               Select a text and click a brush to generate a fill-in-the-blank
130 |               style completion.
131 |             </p>
132 |           </div>
133 | 
134 |           <textarea
135 |             value={textBox}
136 |             onChange={(e) => setTextBox(e.target.value)}
137 |             onSelect={(e) => onSelection(e)}
138 |             rows={10}
139 |             cols={40}
140 |             disabled={loading}
141 |             className="w-full  text-black rounded-md text-sm border-gray-100 bg-gray-50 shadow-md p-3 border-2 disabled:opacity-60"
142 |           />
143 |           <BrushMenu
144 |             isLoading={loading}
145 |             onClick={generateFillin}
146 |             isOpen={menuOpen}
147 |           />
148 |           <Warning isWarn={warn} />
149 |         </div>
150 |       </div>
151 |     </>
152 |   );
153 | }
154 | 


--------------------------------------------------------------------------------
/magic-text/src/app/text/prompt.tsx:
--------------------------------------------------------------------------------
 1 | export enum PromptType {
 2 |   Formal = "Formal",
 3 |   Casual = "Casual",
 4 |   Longer = "Longer",
 5 |   Shorter = "Shorter",
 6 |   Polite = "Polite",
 7 |   Pirate = "Pirate",
 8 | }
 9 | 
10 | export function makePrompt({
11 |   promptType,
12 |   text,
13 | }: {
14 |   promptType: PromptType;
15 |   text: string;
16 | }) {
17 |   if (promptType === PromptType.Formal) {
18 |     return `Rewrite this text in a formal tone suitable for a office setting: \n\n${text} \n\nRewrite:`;
19 |   } else if (promptType === PromptType.Casual) {
20 |     return `Rewrite this text in a casual tone suitable for a friend: \n\n${text} \n\nRewrite:`;
21 |   } else if (promptType === PromptType.Pirate) {
22 |     return `Rewrite this text in a pirate's voice Arr!: \n\n${text} \n\nRewrite:`;
23 |   } else if (promptType === PromptType.Longer) {
24 |     return `Rewrite this text as a longer piece of text, add 3-4 more sentences and use sophisticated language: \n\n${text} \n\nRewrite:`;
25 |   } else if (promptType === PromptType.Shorter) {
26 |     return `Rewrite this text shorter, be concise but informative: \n\n${text} \n\nRewrite:`;
27 |   } else if (promptType === PromptType.Polite) {
28 |     return `Rewrite this text in a polite tone: \n\n${text} \n\nRewrite:`;
29 |   } else {
30 |     // if no prompt type is specified, return the text and warn the user
31 |     console.warn("No prompt type specified. Returning text.");
32 |     return text;
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/magic-text/src/app/youtube/components/Divider.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   ArrowUpOnSquareIcon,
  3 |   ClipboardDocumentIcon,
  4 |   ClipboardDocumentListIcon,
  5 | } from "@heroicons/react/24/outline";
  6 | import Link from "next/link";
  7 | import { toast } from "react-toastify";
  8 | import { parseChaptersFromSummary, extractVideoId } from "../utils";
  9 | export default function Divider({
 10 |   summary,
 11 |   url,
 12 |   shortenFn,
 13 | }: {
 14 |   summary: string;
 15 |   url: string;
 16 |   shortenFn: (e: any) => void;
 17 | }): JSX.Element {
 18 |   let summaryClean = summary;
 19 |   return (
 20 |     <div className="relative py-10">
 21 |       <div className="absolute inset-0 flex items-center" aria-hidden="true">
 22 |         <div className="w-full border-t border-gray-300" />
 23 |       </div>
 24 |       <div className="relative flex justify-center space-x-5">
 25 |         <button
 26 |           type="button"
 27 |           data-te-toggle="tooltip-donate"
 28 |           title="Support this project so we can keep it free and open source"
 29 |           className="inline-flex items-center gap-x-1.5 rounded-full bg-white px-3 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
 30 |         >
 31 |           <ClipboardDocumentIcon
 32 |             className="-ml-1 -mr-0.5 h-5 w-5 text-gray-400"
 33 |             aria-hidden="true"
 34 |           />
 35 |           <Link href="https://www.buymeacoffee.com/jxnl" target="_blank">
 36 |             Donate
 37 |           </Link>
 38 |         </button>
 39 |         {summaryClean.length > 0 ? (
 40 |           <button
 41 |             type="button"
 42 |             title="Shorten the summary again"
 43 |             className="inline-flex items-center gap-x-1.5 rounded-full bg-white px-3 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
 44 |             onClick={(e) => {
 45 |               toast.success("Shortening the summary again...");
 46 |               shortenFn(e);
 47 |             }}
 48 |           >
 49 |             <ClipboardDocumentIcon
 50 |               className="-ml-1 -mr-0.5 h-5 w-5 text-gray-400"
 51 |               aria-hidden="true"
 52 |             />
 53 |             Shorten
 54 |           </button>
 55 |         ) : null}
 56 |         <button
 57 |           type="button"
 58 |           title="Copy the summary markdown to your clipboard"
 59 |           className="inline-flex items-center gap-x-1.5 rounded-full bg-white px-3 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
 60 |           onClick={() => {
 61 |             if (summaryClean.length === 0) {
 62 |               toast.error("Please generate a summary first");
 63 |               return;
 64 |             }
 65 |             navigator.clipboard.writeText(summaryClean);
 66 |             toast.success("Copied the markdown summary to clipboard!");
 67 |           }}
 68 |         >
 69 |           <ClipboardDocumentIcon
 70 |             className="-ml-1 -mr-0.5 h-5 w-5 text-gray-400"
 71 |             aria-hidden="true"
 72 |           />
 73 |           Copy Summary
 74 |         </button>
 75 |         <button
 76 |           type="button"
 77 |           title="Copy the chapters markdown to your clipboard, leave this as a comment on the video to automatically generate chapters for everyone who watches the video"
 78 |           className="inline-flex items-center gap-x-1.5 rounded-full bg-white px-3 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
 79 |           onClick={() => {
 80 |             if (summaryClean.length === 0) {
 81 |               toast.error("Please generate a summary first");
 82 |               return;
 83 |             }
 84 | 
 85 |             const chapters = parseChaptersFromSummary(summaryClean);
 86 |             navigator.clipboard.writeText(
 87 |               chapters +
 88 |                 `\n\nPowered by https://magic.jxnl.co/demo/youtube?v=${extractVideoId(
 89 |                   url
 90 |                 )}`
 91 |             );
 92 |             toast.success(
 93 |               `Copied formatted chapters for this YouTube video! Share the love and leave them as a comment to help others add structure to the content`
 94 |             );
 95 |           }}
 96 |         >
 97 |           <ClipboardDocumentListIcon
 98 |             className="-ml-1 -mr-0.5 h-5 w-5 text-gray-400"
 99 |             aria-hidden="true"
100 |           />
101 |           Copy Chapters
102 |         </button>
103 |         <button
104 |           type="button"
105 |           title="Copy the link to this summary to your clipboard"
106 |           className="inline-flex items-center gap-x-1.5 rounded-full bg-white px-3 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
107 |           onClick={() => {
108 |             if (summaryClean.length === 0) {
109 |               toast.error("Please generate a summary first");
110 |               return;
111 |             }
112 |             const videoId = extractVideoId(url);
113 |             navigator.clipboard.writeText(
114 |               `https://magic.jxnl.co/youtube?v=${videoId}`
115 |             );
116 |             toast.success("Link copied a shareable magic link to clipboard!");
117 |           }}
118 |         >
119 |           <ArrowUpOnSquareIcon
120 |             className="-ml-1 -mr-0.5 h-5 w-5 text-gray-400"
121 |             aria-hidden="true"
122 |           />
123 |           Share
124 |         </button>
125 |       </div>
126 |     </div>
127 |   );
128 | }
129 | 


--------------------------------------------------------------------------------
/magic-text/src/app/youtube/components/Youtube.tsx:
--------------------------------------------------------------------------------
 1 | // react component to render a youtube video player
 2 | 
 3 | import React from "react";
 4 | import { extractVideoId } from "../utils";
 5 | 
 6 | export default function Youtube(props: { url: string; ts: Number }) {
 7 |   const url = props.url;
 8 |   const ts = props.ts;
 9 |   const videoId = extractVideoId(url);
10 | 
11 |   if (videoId === null) {
12 |     return <div>Invalid youtube url</div>;
13 |   }
14 | 
15 |   return (
16 |     <div>
17 |       <iframe
18 |         className="aspect-video w-full"
19 |         src={`https://www.youtube.com/embed/${videoId}?start=${ts}&autoplay=${1}`}
20 |         allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
21 |         allowFullScreen
22 |       />
23 |     </div>
24 |   );
25 | }
26 | 


--------------------------------------------------------------------------------
/magic-text/src/app/youtube/layout.tsx:
--------------------------------------------------------------------------------
 1 | const title = "Youtube";
 2 | const description =
 3 |   "Bringing together the worlds of video content and note-taking, Magic YouTube is the ultimate tool for extracting knowledge from online resources.";
 4 | 
 5 | export const metadata = {
 6 |   title,
 7 |   description,
 8 |   openGraph: {
 9 |     title,
10 |     description,
11 |     images: [
12 |       {
13 |         url: "/youtube.png",
14 |         width: 800,
15 |         height: 600,
16 |       },
17 |     ],
18 |   },
19 |   twitter: {
20 |     card: "summary_large_image",
21 |     title,
22 |     description,
23 |     creator: "@jxnlco",
24 |     images: ["https://magic.jxnl.co/youtube.png"],
25 |   },
26 | };
27 | 
28 | export default function Layout({ children }: { children: React.ReactNode }) {
29 |   return <div className="py-24 sm:py-32 m-auto">{children}</div>;
30 | }
31 | 


--------------------------------------------------------------------------------
/magic-text/src/app/youtube/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | import { useSearchParams } from "next/navigation";
  3 | import { useState, useRef, useEffect } from "react";
  4 | import { toast, ToastContainer } from "react-toastify";
  5 | import ReactMarkdown from "react-markdown";
  6 | 
  7 | import "react-toastify/dist/ReactToastify.css";
  8 | 
  9 | import Divider from "./components/Divider";
 10 | import Youtube from "./components/Youtube";
 11 | import {
 12 |   cachedSummary,
 13 |   isValidYoutubeUrl,
 14 |   parseChaptersFromSummary,
 15 | } from "./utils";
 16 | import Link from "next/link";
 17 | import { CurrencyDollarIcon } from "@heroicons/react/24/outline";
 18 | import { Support } from "../components/links";
 19 | export default function Example() {
 20 |   const [started, setStart] = useState(false);
 21 |   const [url, setUrl] = useState("");
 22 |   const urlRef = useRef(null);
 23 | 
 24 |   const [loading, setLoading] = useState(false);
 25 |   const [summary, setSummary] = useState("");
 26 |   const [ts, setTs] = useState(0);
 27 | 
 28 |   function LinkRenderer(props: any) {
 29 |     const href = props.href;
 30 | 
 31 |     // extract the ts from the youtube href
 32 |     // t=1234s where ts = 1234
 33 |     const regex = new RegExp("t=(\\d+)s");
 34 |     const _ts = parseInt(href.match(regex)[1]);
 35 | 
 36 |     return (
 37 |       <a
 38 |         className="no-underline hover:opacity-80 cursor-pointer hover:underline"
 39 |         title={`Jump to ${_ts}s`}
 40 |         onClick={() => {
 41 |           setTs(_ts);
 42 |         }}
 43 |       >
 44 |         #
 45 |       </a>
 46 |     );
 47 |   }
 48 | 
 49 |   const generateSummary = async (e: any) => {
 50 |     e.preventDefault;
 51 | 
 52 |     if (!urlRef.current) {
 53 |       toast.error("Please enter a valid youtube url");
 54 |       return;
 55 |     }
 56 | 
 57 |     // @ts-ignore
 58 |     const currentUrl = urlRef.current.value as string;
 59 | 
 60 |     // use regex to check if url is youtube linke
 61 |     if (!isValidYoutubeUrl(currentUrl)) {
 62 |       toast.error("Please enter a valid youtube url");
 63 |       return;
 64 |     }
 65 | 
 66 |     setStart(true);
 67 |     setSummary("");
 68 |     setLoading(true);
 69 |     setUrl(currentUrl);
 70 | 
 71 |     const response = await fetch("/api/summary", {
 72 |       method: "POST",
 73 |       headers: {
 74 |         "Content-Type": "application/json",
 75 |       },
 76 |       body: JSON.stringify({
 77 |         url: currentUrl,
 78 |       }),
 79 |     });
 80 |     console.log("Edge function returned.");
 81 |     console.log(response);
 82 | 
 83 |     if (!response.ok) {
 84 |       toast.error("Error generating summary.");
 85 |       setLoading(false);
 86 |       throw new Error(response.statusText);
 87 |     } else {
 88 |       toast.success("Generating Summary!");
 89 |     }
 90 | 
 91 |     // This data is a ReadableStream
 92 |     const data = response.body;
 93 |     if (!data) {
 94 |       return;
 95 |     }
 96 | 
 97 |     const reader = data.getReader();
 98 |     const decoder = new TextDecoder();
 99 |     let done = false;
100 | 
101 |     while (!done) {
102 |       const { value, done: doneReading } = await reader.read();
103 |       done = doneReading;
104 |       const chunkValue = decoder.decode(value);
105 |       setSummary((prev) => prev + chunkValue);
106 |     }
107 | 
108 |     toast.success("Summary completed!");
109 |     setLoading(false);
110 |     console.log("Summary completed!", summary);
111 |   };
112 | 
113 |   const generateShorten = async (e: any) => {
114 |     e.preventDefault;
115 |     setLoading(true);
116 | 
117 |     const response = await fetch("/api/shorten", {
118 |       method: "POST",
119 |       headers: {
120 |         "Content-Type": "application/json",
121 |       },
122 |       body: JSON.stringify({
123 |         content: summary,
124 |       }),
125 |     });
126 |     console.log("Edge function returned.");
127 |     console.log(response);
128 | 
129 |     if (!response.ok) {
130 |       toast.error("Error shorttening summary.");
131 |       setLoading(false);
132 |       throw new Error(response.statusText);
133 |     } else {
134 |       toast.success("Generating Summary!");
135 |     }
136 | 
137 |     // This data is a ReadableStream
138 |     const data = response.body;
139 |     if (!data) {
140 |       return;
141 |     }
142 | 
143 |     const reader = data.getReader();
144 |     const decoder = new TextDecoder();
145 |     let done = false;
146 | 
147 |     setSummary("");
148 | 
149 |     while (!done) {
150 |       const { value, done: doneReading } = await reader.read();
151 |       done = doneReading;
152 |       const chunkValue = decoder.decode(value);
153 |       setSummary((prev) => prev + chunkValue);
154 |     }
155 | 
156 |     toast.success("Summary shorten completed!");
157 |     setLoading(false);
158 |     console.log("Summary shortten completed!", summary);
159 |   };
160 | 
161 |   // I believe this is the same as componentDidMount
162 |   // if there is a videoId in the url, set the url to the videoId
163 |   // and check if there is a cached summary, if so, set the summary
164 |   // @ts-ignore
165 |   const videoId = useSearchParams().get("v");
166 |   useEffect(() => {
167 |     if (videoId) {
168 |       setUrl("https://www.youtube.com/watch?v=" + videoId);
169 |       // @ts-ignore
170 |       urlRef.current.value = "https://www.youtube.com/watch?v=" + videoId;
171 |       setStart(true);
172 |       setLoading(true);
173 |       cachedSummary(videoId).then((res) => {
174 |         const { summary_markdown } = res;
175 |         if (summary_markdown) {
176 |           toast.info("Cached summary found!");
177 |           setSummary(summary_markdown);
178 |         } else {
179 |           toast.info("No cached summary found.");
180 |         }
181 |         setLoading(false);
182 |       });
183 |     }
184 |   }, []);
185 | 
186 |   return (
187 |     <>
188 |       <ToastContainer />
189 |       <div className="mx-auto max-w-7xl lg:grid lg:grid-cols-12 lg:gap-x-8 lg:px-8">
190 |         <div className="px-6 pt-10 pb-24 sm:pb-32 lg:col-span-7 lg:px-0 lg:pt-20 lg:pb-56 xl:col-span-6">
191 |           <div className="hidden sm:mb-8 sm:flex sm:justify-left">
192 |             <div className="relative rounded-full py-1 px-3 text-sm leading-6 text-gray-600 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
193 |               Check out the chrome extension.{" "}
194 |               <a
195 |                 href="https://github.com/jxnl/youtube-summary-chrome"
196 |                 className="font-semibold text-red-600"
197 |               >
198 |                 <span className="absolute inset-0" aria-hidden="true" />
199 |                 GitHub <span aria-hidden="true">&rarr;</span>
200 |               </a>
201 |             </div>
202 |           </div>
203 |           <div className="max-w-2xl lg:mx-0">
204 |             <h1 className="mt-12 text-4xl font-bold tracking-tight text-gray-900 sm:mt-10 sm:text-6xl">
205 |               Youtube University
206 |             </h1>
207 |             <p className="mt-6 text-lg leading-8 text-gray-600">
208 |               Bringing together the worlds of video content and note-taking,
209 |               Magic YouTube is the ultimate tool for extracting knowledge from
210 |               online resources. If you have any feedback hit me up on{" "}
211 |               <Link
212 |                 href="https://twitter.com/jxnlco"
213 |                 className="text-red-500 font-bold hover:underline"
214 |               >
215 |                 Twitter.
216 |               </Link>{" "}
217 |               <br />
218 |               Transcriptions can get costly for long videos without subtitles,
219 |               please consider donating.{" "}
220 |               <Link
221 |                 href="https://www.buymeacoffee.com/jxnl"
222 |                 className="text-red-500 font-bold hover:underline"
223 |                 target={"_blank"}
224 |               >
225 |                 Buy me a coffee.
226 |               </Link>
227 |             </p>
228 |             <div className="mt-10 flex items-center gap-x-6">
229 |               <div className="relative">
230 |                 <label
231 |                   htmlFor="name"
232 |                   className="absolute -top-2 left-2 inline-block bg-white px-1 text-xs font-medium text-gray-900"
233 |                 >
234 |                   Youtube Link
235 |                 </label>
236 |                 <input
237 |                   type="text"
238 |                   name="url"
239 |                   id="url"
240 |                   ref={urlRef}
241 |                   size={40}
242 |                   className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-red-600 sm:text-sm sm:leading-6 lg:text-base"
243 |                   placeholder="https://www.youtube.com/watch?v=1234567890"
244 |                 />
245 |               </div>
246 |               <button
247 |                 onClick={generateSummary}
248 |                 disabled={loading}
249 |                 type="button"
250 |                 className="rounded-md bg-red-600 py-2 px-3.5 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600 disabled:opacity-80"
251 |               >
252 |                 Go!
253 |               </button>
254 |             </div>
255 |           </div>
256 |         </div>
257 | 
258 |         <div className="relative lg:col-span-5 lg:-mr-8 my-auto">
259 |           {started ? <Youtube url={url} ts={ts} /> : null}
260 |         </div>
261 |       </div>
262 | 
263 |       {started && summary && summary.length > 0 ? (
264 |         <>
265 |           <Divider summary={summary} url={url} shortenFn={generateShorten} />
266 |           <Support />
267 |           <article className="prose prose-red w-full border-red-100 mx-auto px-3 lg:px-0">
268 |             <ReactMarkdown
269 |               components={{
270 |                 a: LinkRenderer,
271 |               }}
272 |             >
273 |               {"> Heres a tip! Click the # to jump to the timestamp.\n" +
274 |                 summary +
275 |                 `\n------\n### Sharing Youtube Chapters\nPaste this into the description or comments to add timestamps to any video!. \n\n` +
276 |                 "```\n" +
277 |                 parseChaptersFromSummary(summary) +
278 |                 `\nPowered by Youtube University https://magic.jxnl.co/youtube?v=${videoId}\n` +
279 |                 "```"}
280 |             </ReactMarkdown>
281 |           </article>
282 |           <Divider summary={summary} url={url} shortenFn={generateShorten} />
283 |           <Support />
284 |         </>
285 |       ) : null}
286 |     </>
287 |   );
288 | }
289 | 


--------------------------------------------------------------------------------
/magic-text/src/app/youtube/utils.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Parses chapters from summary
 3 |  * @param summary - summary to parse chapters from
 4 |  * @returns chapters in format "timestamp - title"
 5 |  */
 6 | export function parseChaptersFromSummary(summary: string) {
 7 |   var chapters = "";
 8 |   // iterate through lines and extract chapters
 9 |   for (const line of summary.split("\n")) {
10 |     // check if line is a chapter
11 |     if (line.startsWith("#")) {
12 |       // extract timestamp and title
13 |       const matches = line.match(/# \[(.*?)\]\(.*?\) (.*)/);
14 |       if (matches) {
15 |         chapters += `${matches[1]} - ${matches[2]}`;
16 |         chapters += "\n";
17 |       }
18 |     }
19 |   }
20 |   return chapters;
21 | }
22 | 
23 | /**
24 |  * Checks if summary is cached
25 |  * @param videoId - id of video to check
26 |  * @returns summary if cached, otherwise null
27 |  */
28 | export async function cachedSummary(videoId: string) {
29 |   console.log(`Checking for cached summary for ${videoId}...`);
30 |   return await fetch("/api/cached_summary?v=" + videoId, {
31 |     next: { revalidate: 0 },
32 |     method: "GET",
33 |     headers: {
34 |       "Content-Type": "application/json",
35 |     },
36 |   })
37 |     .then((res) => res.json())
38 |     .catch((err) => console.log(err));
39 | }
40 | 
41 | /**
42 |  * Checks if a url is a valid youtube url
43 |  * @param url - url to check
44 |  */
45 | export function isValidYoutubeUrl(url: string) {
46 |   const linkRegex = new RegExp(
47 |     "^(https?:\\/\\/)?((w){3}.)?youtu(be|.be)?(\\.com)?\\/.+"
48 |   );
49 | 
50 |   return linkRegex.test(url);
51 | }
52 | 
53 | /**
54 |  * Extracts video id from youtube url
55 |  * @param url - url to extract video id from
56 |  * @returns
57 |  */
58 | export function extractVideoId(url: string) {
59 |   const videoId = url.match(
60 |     /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/
61 |   );
62 |   if (videoId === null) {
63 |     return null;
64 |   } else {
65 |     return videoId[1];
66 |   }
67 | }
68 | 


--------------------------------------------------------------------------------
/magic-text/src/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 | 


--------------------------------------------------------------------------------
/magic-text/src/pages/api/cached_summary.ts:
--------------------------------------------------------------------------------
 1 | import { PrismaClient } from "@prisma/client";
 2 | import { NextApiRequest, NextApiResponse } from "next";
 3 | 
 4 | export const dynamic = "force-dynamic";
 5 | 
 6 | const prisma = new PrismaClient();
 7 | 
 8 | export default async function handler(
 9 |   req: NextApiRequest,
10 |   res: NextApiResponse
11 | ) {
12 |   const { query, method } = req;
13 | 
14 |   if (method === "GET") {
15 |     const v = query.v as string;
16 |     console.log(`Checking cache for video ${v}...`);
17 |     const resp = await prisma.summary.findFirst({
18 |       where: {
19 |         video_id: v,
20 |       },
21 |       orderBy: {
22 |         id: "desc",
23 |       },
24 |     });
25 | 
26 |     if (!resp) {
27 |       console.log(`No cache found for video ${v}...`);
28 |       res.status(500).send({ error: "failed to fetch data" });
29 |       return;
30 |     }
31 | 
32 |     console.log(`Cache found for video ${v}...`);
33 |     res.status(200).json(resp);
34 |   } else {
35 |     res.status(500).send({ error: "method not allowed" });
36 |     return;
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/magic-text/src/pages/api/generate.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   createParser,
  3 |   ParsedEvent,
  4 |   ReconnectInterval,
  5 | } from "eventsource-parser";
  6 | 
  7 | export const config = {
  8 |   runtime: "edge",
  9 | };
 10 | 
 11 | if (!process.env.OPENAI_API_KEY) {
 12 |   throw new Error("Missing env var from OpenAI");
 13 | }
 14 | 
 15 | export interface Message {
 16 |   role: "user";
 17 |   content: string;
 18 | }
 19 | 
 20 | interface OpenAIStreamPayload {
 21 |   model: string;
 22 |   messages: Message[];
 23 |   temperature: number;
 24 |   top_p: number;
 25 |   frequency_penalty: number;
 26 |   presence_penalty: number;
 27 |   max_tokens: number;
 28 |   stream: boolean;
 29 |   stop?: string[];
 30 |   n: number;
 31 | }
 32 | 
 33 | export async function OpenAIStream(payload: OpenAIStreamPayload) {
 34 |   const encoder = new TextEncoder();
 35 |   const decoder = new TextDecoder();
 36 | 
 37 |   let counter = 0;
 38 | 
 39 |   const res = await fetch("https://oai.hconeai.com/v1/chat/completions", {
 40 |     headers: {
 41 |       "Content-Type": "application/json",
 42 |       Authorization: `Bearer ${process.env.OPENAI_API_KEY ?? ""}`,
 43 |       "Helicone-Auth": `Bearer ${process.env.HELICONE_API_KEY ?? ""}`,
 44 |       "Helicone-Cache-Enabled": "true",
 45 |       user: "magic@jxnl.co",
 46 |     },
 47 |     method: "POST",
 48 |     body: JSON.stringify(payload),
 49 |   });
 50 | 
 51 |   if (!res.ok) {
 52 |     throw new Error(`OpenAI API error: ${res.statusText}`);
 53 |   }
 54 | 
 55 |   const stream = new ReadableStream({
 56 |     async start(controller) {
 57 |       // callback
 58 |       function onParse(event: ParsedEvent | ReconnectInterval) {
 59 |         if (event.type === "event") {
 60 |           const data = event.data;
 61 |           // https://beta.openai.com/docs/api-reference/completions/create#completions/create-stream
 62 |           if (data === "[DONE]") {
 63 |             controller.close();
 64 |             return;
 65 |           }
 66 |           try {
 67 |             const json = JSON.parse(data);
 68 |             const text = json.choices[0].delta?.content || "";
 69 |             if (counter < 2 && (text.match(/\n/) || []).length) {
 70 |               // this is a prefix character (i.e., "\n\n"), do nothing
 71 |               return;
 72 |             }
 73 |             const queue = encoder.encode(text);
 74 |             controller.enqueue(queue);
 75 |             counter++;
 76 |           } catch (e) {
 77 |             // maybe parse error
 78 |             controller.error(e);
 79 |           }
 80 |         }
 81 |       }
 82 | 
 83 |       // stream response (SSE) from OpenAI may be fragmented into multiple chunks
 84 |       // this ensures we properly read chunks and invoke an event for each SSE event stream
 85 |       const parser = createParser(onParse);
 86 |       // https://web.dev/streams/#asynchronous-iteration
 87 |       for await (const chunk of res.body as any) {
 88 |         parser.feed(decoder.decode(chunk));
 89 |       }
 90 |     },
 91 |   });
 92 | 
 93 |   return stream;
 94 | }
 95 | 
 96 | const handler = async (req: Request): Promise<Response> => {
 97 |   const { prompt, stop } = (await req.json()) as {
 98 |     prompt?: string;
 99 |     stop?: string[];
100 |   };
101 | 
102 |   if (!prompt) {
103 |     return new Response("No prompt in the request", { status: 400 });
104 |   }
105 | 
106 |   const payload: OpenAIStreamPayload = {
107 |     model: "gpt-3.5-turbo",
108 |     messages: [
109 |       {
110 |         role: "user",
111 |         content: prompt,
112 |       },
113 |     ],
114 |     temperature: 0.2,
115 |     top_p: 1,
116 |     frequency_penalty: 0,
117 |     presence_penalty: 0,
118 |     max_tokens: 2000,
119 |     stream: true,
120 |     stop: stop || undefined,
121 |     n: 1,
122 |   };
123 | 
124 |   const stream = await OpenAIStream(payload);
125 |   return new Response(stream);
126 | };
127 | 
128 | export default handler;
129 | 


--------------------------------------------------------------------------------
/magic-text/src/pages/api/shorten.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   createParser,
 3 |   ParsedEvent,
 4 |   ReconnectInterval,
 5 | } from "eventsource-parser";
 6 | 
 7 | export const config = {
 8 |   runtime: "edge",
 9 | };
10 | 
11 | if (!process.env.OPENAI_API_KEY) {
12 |   throw new Error("Missing env var from OpenAI");
13 | }
14 | 
15 | interface StreamPayload {
16 |   content: string;
17 |   use_sse: boolean;
18 | }
19 | 
20 | async function Shorten(payload: StreamPayload) {
21 |   const encoder = new TextEncoder();
22 |   const decoder = new TextDecoder();
23 | 
24 |   const res = await fetch("https://youtube-markdown.fly.dev/shorten_markdown", {
25 |     headers: {
26 |       "Content-Type": "application/json",
27 |       Authorization: `Bearer ${process.env.OPENAI_API_KEY ?? ""}`,
28 |     },
29 |     method: "POST",
30 |     body: JSON.stringify(payload),
31 |   });
32 | 
33 |   const stream = new ReadableStream({
34 |     async start(controller) {
35 |       // callback
36 |       function onParse(event: ParsedEvent | ReconnectInterval) {
37 |         if (event.type === "event") {
38 |           const data = event.data.trim();
39 |           if (data === "[DONE]") {
40 |             controller.close();
41 |             return;
42 |           }
43 |           try {
44 |             const json = JSON.parse(data);
45 |             const text = json.text;
46 |             const queue = encoder.encode(text);
47 |             controller.enqueue(queue);
48 |           } catch (e) {
49 |             console.log({ e });
50 |           }
51 |         }
52 |       }
53 | 
54 |       // stream response (SSE) from OpenAI may be fragmented into multiple chunks
55 |       // this ensures we properly read chunks and invoke an event for each SSE event stream
56 |       const parser = createParser(onParse);
57 |       // https://web.dev/streams/#asynchronous-iteration
58 |       for await (const chunk of res.body as any) {
59 |         parser.feed(decoder.decode(chunk));
60 |       }
61 |     },
62 |   });
63 | 
64 |   return stream;
65 | }
66 | 
67 | export default async function handler(req: Request) {
68 |   const { content } = (await req.json()) as {
69 |     content?: string;
70 |   };
71 | 
72 |   if (!content) {
73 |     return new Response("No content!", { status: 500 });
74 |   }
75 | 
76 |   try {
77 |     const payload = {
78 |       content: content,
79 |       use_sse: true,
80 |     };
81 | 
82 |     const stream = await Shorten(payload);
83 |     return new Response(stream);
84 |   } catch (e: any) {
85 |     console.log({ e });
86 |     return new Response(e, { status: 500 });
87 |   }
88 | }
89 | 


--------------------------------------------------------------------------------
/magic-text/src/pages/api/summary.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   createParser,
 3 |   ParsedEvent,
 4 |   ReconnectInterval,
 5 | } from "eventsource-parser";
 6 | 
 7 | export const config = {
 8 |   runtime: "edge",
 9 | };
10 | 
11 | if (!process.env.OPENAI_API_KEY) {
12 |   throw new Error("Missing env var from OpenAI");
13 | }
14 | 
15 | interface StreamPayload {
16 |   url: string;
17 |   use_sse: boolean;
18 | }
19 | 
20 | async function Summary(payload: StreamPayload) {
21 |   const encoder = new TextEncoder();
22 |   const decoder = new TextDecoder();
23 | 
24 |   console.log(`Fetching ${payload.url}`);
25 |   const res = await fetch("https://youtube-markdown.fly.dev/youtube_markdown", {
26 |     headers: {
27 |       "Content-Type": "application/json",
28 |       Authorization: `Bearer ${process.env.OPENAI_API_KEY ?? ""}`,
29 |     },
30 |     method: "POST",
31 |     body: JSON.stringify(payload),
32 |   });
33 | 
34 |   const stream = new ReadableStream({
35 |     async start(controller) {
36 |       // callback
37 |       function onParse(event: ParsedEvent | ReconnectInterval) {
38 |         if (event.type === "event") {
39 |           const data = event.data.trim();
40 |           if (data === "[DONE]") {
41 |             controller.close();
42 |             return;
43 |           }
44 |           try {
45 |             const json = JSON.parse(data);
46 |             const text = json.text;
47 |             const queue = encoder.encode(text);
48 |             controller.enqueue(queue);
49 |           } catch (e) {
50 |             console.log({ e });
51 |           }
52 |         }
53 |       }
54 | 
55 |       // stream response (SSE) from OpenAI may be fragmented into multiple chunks
56 |       // this ensures we properly read chunks and invoke an event for each SSE event stream
57 |       const parser = createParser(onParse);
58 |       // https://web.dev/streams/#asynchronous-iteration
59 |       for await (const chunk of res.body as any) {
60 |         parser.feed(decoder.decode(chunk));
61 |       }
62 |     },
63 |   });
64 | 
65 |   return stream;
66 | }
67 | 
68 | export default async function handler(req: Request) {
69 |   const { url } = (await req.json()) as {
70 |     url?: string;
71 |   };
72 | 
73 |   if (!url) {
74 |     return new Response("No url!", { status: 500 });
75 |   }
76 | 
77 |   try {
78 |     const payload = {
79 |       url: url,
80 |       use_sse: true,
81 |     };
82 | 
83 |     const stream = await Summary(payload);
84 |     return new Response(stream);
85 |   } catch (e: any) {
86 |     console.log({ e });
87 |     return new Response(e, { status: 500 });
88 |   }
89 | }
90 | 


--------------------------------------------------------------------------------
/magic-text/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/typography"), require("@tailwindcss/forms"), require("tailwindcss-animate")],
76 | }


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


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