Skip to content

Commit e86f070

Browse files
ajcwebdevajcwebdev
authored
Merge pull request #45 from ajcwebdev/jenn
Integrate `web` and `astro` Packages
2 parents 34f740f + 5d0824e commit e86f070

14 files changed

+290
-322
lines changed

‎packages/astro/astro.config.ts

+11-9
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { defineConfig } from "astro/config"
2+
import react from '@astrojs/react';
23
import mdx from "@astrojs/mdx"
34
import sitemap from "@astrojs/sitemap"
45
import icon from "astro-icon"
@@ -7,13 +8,14 @@ import { expressiveCodeOptions } from "./src/site.config"
78

89
// https://astro.build/config
910
export default defineConfig({
10-
site: "https://autoshow.sh/",
11-
integrations: [
12-
expressiveCode(expressiveCodeOptions),
13-
icon(),
14-
sitemap(),
15-
mdx(),
16-
],
17-
// https://docs.astro.build/en/guides/prefetch/
18-
prefetch: true,
11+
site: "https://autoshow.sh/",
12+
integrations: [
13+
expressiveCode(expressiveCodeOptions),
14+
icon(),
15+
sitemap(),
16+
mdx(),
17+
react(),
18+
],
19+
// https://docs.astro.build/en/guides/prefetch/
20+
prefetch: true,
1921
})

‎packages/astro/package.json

+6
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,17 @@
99
},
1010
"dependencies": {
1111
"@astrojs/mdx": "^3.1.5",
12+
"@astrojs/react": "^3.6.3",
1213
"@astrojs/rss": "^4.0.7",
1314
"@astrojs/sitemap": "^3.1.6",
15+
"@types/react": "^18.3.12",
16+
"@types/react-dom": "^18.3.1",
1417
"astro": "^4.15.4",
1518
"astro-expressive-code": "^0.36.1",
1619
"astro-icon": "^1.1.1",
20+
"react": "^18.3.1",
21+
"react-dom": "^18.3.1",
22+
"react-router-dom": "^7.0.2",
1723
"satori": "^0.10.14",
1824
"satori-html": "^0.3.2",
1925
"sharp": "^0.33.5"

‎packages/web/src/Form.jsx ‎packages/astro/src/components/app/Form.jsx

+103-116
Original file line numberDiff line numberDiff line change
@@ -1,115 +1,10 @@
11
// packages/web/src/Form.jsx
22

3-
import React, { useState } from 'react'
4-
5-
// Define constants for prompts, transcription services, Whisper models, LLM services, and their models
6-
const PROMPT_CHOICES = [
7-
{ value: 'titles', label: 'Titles' },
8-
{ value: 'summary', label: 'Summary' },
9-
{ value: 'shortChapters', label: 'Short Chapters' },
10-
{ value: 'mediumChapters', label: 'Medium Chapters' },
11-
{ value: 'longChapters', label: 'Long Chapters' },
12-
{ value: 'takeaways', label: 'Key Takeaways' },
13-
{ value: 'questions', label: 'Questions' },
14-
]
15-
16-
const TRANSCRIPTION_SERVICES = [
17-
{ value: 'whisper', label: 'Whisper.cpp' },
18-
{ value: 'whisperDocker', label: 'Whisper.cpp (Docker)' },
19-
{ value: 'whisperPython', label: 'Whisper Python' },
20-
{ value: 'whisperDiarization', label: 'Whisper Diarization' },
21-
{ value: 'deepgram', label: 'Deepgram' },
22-
{ value: 'assembly', label: 'AssemblyAI' },
23-
]
24-
25-
const WHISPER_MODELS = [
26-
{ value: 'tiny', label: 'tiny' },
27-
{ value: 'tiny.en', label: 'tiny.en' },
28-
{ value: 'base', label: 'base' },
29-
{ value: 'base.en', label: 'base.en' },
30-
{ value: 'small', label: 'small' },
31-
{ value: 'small.en', label: 'small.en' },
32-
{ value: 'medium', label: 'medium' },
33-
{ value: 'medium.en', label: 'medium.en' },
34-
{ value: 'large-v1', label: 'large-v1' },
35-
{ value: 'large-v2', label: 'large-v2' },
36-
{ value: 'large-v3-turbo', label: 'large-v3-turbo' },
37-
{ value: 'turbo', label: 'turbo' },
38-
]
39-
40-
const LLM_SERVICES = [
41-
{ value: 'chatgpt', label: 'ChatGPT' },
42-
{ value: 'claude', label: 'Claude' },
43-
{ value: 'cohere', label: 'Cohere' },
44-
{ value: 'mistral', label: 'Mistral' },
45-
{ value: 'ollama', label: 'Ollama' },
46-
{ value: 'gemini', label: 'Gemini' },
47-
{ value: 'fireworks', label: 'Fireworks' },
48-
{ value: 'together', label: 'Together AI' },
49-
{ value: 'groq', label: 'Groq' },
50-
]
51-
52-
const LLM_MODELS = {
53-
chatgpt: [
54-
{ value: 'gpt-4o-mini', label: 'GPT 4o Mini' },
55-
{ value: 'gpt-4o', label: 'GPT 4o' },
56-
{ value: 'gpt-4-turbo', label: 'GPT 4 Turbo' },
57-
{ value: 'gpt-4', label: 'GPT 4' },
58-
],
59-
claude: [
60-
{ value: 'claude-3-5-sonnet-20240620', label: 'Claude 3.5 Sonnet' },
61-
{ value: 'claude-3-opus-20240229', label: 'Claude 3 Opus' },
62-
{ value: 'claude-3-sonnet-20240229', label: 'Claude 3 Sonnet' },
63-
{ value: 'claude-3-haiku-20240307', label: 'Claude 3 Haiku' },
64-
],
65-
cohere: [
66-
{ value: 'command-r', label: 'Command R' },
67-
{ value: 'command-r-plus', label: 'Command R Plus' },
68-
],
69-
mistral: [
70-
{ value: 'open-mixtral-8x7b', label: 'Mixtral 8x7b' },
71-
{ value: 'open-mixtral-8x22b', label: 'Mixtral 8x22b' },
72-
{ value: 'mistral-large-latest', label: 'Mistral Large' },
73-
{ value: 'open-mistral-nemo', label: 'Mistral Nemo' },
74-
],
75-
ollama: [
76-
{ value: 'llama3.2:1b', label: 'LLAMA 3.2 1B' },
77-
{ value: 'llama3.2:3b', label: 'LLAMA 3.2 3B' },
78-
{ value: 'gemma2:2b', label: 'GEMMA 2 2B' },
79-
{ value: 'phi3.5:3.8b', label: 'PHI 3.5' },
80-
{ value: 'qwen2.5:1.5b', label: 'QWEN 2.5 1.5B' },
81-
{ value: 'qwen2.5:3b', label: 'QWEN 2.5 3B' },
82-
],
83-
gemini: [
84-
{ value: 'gemini-1.5-flash', label: 'Gemini 1.5 Flash' },
85-
{ value: 'gemini-1.5-pro-exp-0827', label: 'Gemini 1.5 Pro' },
86-
],
87-
fireworks: [
88-
{ value: 'accounts/fireworks/models/llama-v3p1-405b-instruct', label: 'LLAMA 3.1 405B' },
89-
{ value: 'accounts/fireworks/models/llama-v3p1-70b-instruct', label: 'LLAMA 3.1 70B' },
90-
{ value: 'accounts/fireworks/models/llama-v3p1-8b-instruct', label: 'LLAMA 3.1 8B' },
91-
{ value: 'accounts/fireworks/models/llama-v3p2-3b-instruct', label: 'LLAMA 3.2 3B' },
92-
{ value: 'accounts/fireworks/models/llama-v3p2-1b-instruct', label: 'LLAMA 3.2 1B' },
93-
{ value: 'accounts/fireworks/models/qwen2p5-72b-instruct', label: 'QWEN 2.5 72B' },
94-
],
95-
together: [
96-
{ value: 'meta-llama/Llama-3.2-3B-Instruct-Turbo', label: 'LLAMA 3.2 3B' },
97-
{ value: 'meta-llama/Meta-Llama-3.1-405B-Instruct-Turbo', label: 'LLAMA 3.1 405B' },
98-
{ value: 'meta-llama/Meta-Llama-3.1-70B-Instruct-Turbo', label: 'LLAMA 3.1 70B' },
99-
{ value: 'meta-llama/Meta-Llama-3.1-8B-Instruct-Turbo', label: 'LLAMA 3.1 8B' },
100-
{ value: 'google/gemma-2-27b-it', label: 'Gemma 2 27B' },
101-
{ value: 'google/gemma-2-9b-it', label: 'Gemma 2 9B' },
102-
{ value: 'Qwen/Qwen2.5-72B-Instruct-Turbo', label: 'QWEN 2.5 72B' },
103-
{ value: 'Qwen/Qwen2.5-7B-Instruct-Turbo', label: 'QWEN 2.5 7B' },
104-
],
105-
groq: [
106-
{ value: 'llama-3.1-70b-versatile', label: 'LLAMA 3.1 70B Versatile' },
107-
{ value: 'llama-3.1-8b-instant', label: 'LLAMA 3.1 8B Instant' },
108-
{ value: 'llama-3.2-1b-preview', label: 'LLAMA 3.2 1B Preview' },
109-
{ value: 'llama-3.2-3b-preview', label: 'LLAMA 3.2 3B Preview' },
110-
{ value: 'mixtral-8x7b-32768', label: 'Mixtral 8x7b 32768' },
111-
],
112-
}
3+
import React, { useState, useEffect } from 'react'
4+
import {
5+
PROMPT_CHOICES, TRANSCRIPTION_SERVICES, WHISPER_MODELS, LLM_SERVICES, LLM_MODELS
6+
} from '@/site-config'
7+
// import { BrowserRouter as Router, Routes, Route, Link, useParams } from 'react-router-dom'
1138

1149
// Alert component to display error messages
11510
const Alert = ({ message, variant }) => (
@@ -118,14 +13,53 @@ const Alert = ({ message, variant }) => (
11813
</div>
11914
)
12015

121-
const Form = ({ onNewShowNote }) => {
16+
const ShowNote = () => {
17+
const { id } = useParams()
18+
const [showNote, setShowNote] = useState(null)
19+
20+
useEffect(() => {
21+
// Fetch the show note from the backend
22+
fetch(`http://localhost:3000/show-notes/${id}`)
23+
.then((response) => response.json())
24+
.then((data) => {
25+
setShowNote(data.showNote)
26+
})
27+
.catch((error) => {
28+
console.error('Error fetching show note:', error)
29+
})
30+
}, [id])
31+
32+
if (!showNote) {
33+
return <div>Loading...</div>
34+
}
35+
36+
// Format content by adding line breaks
37+
const formatContent = (text) => {
38+
return text.split('\n').map((line, index) => (
39+
<React.Fragment key={index}>
40+
{line}
41+
<br />
42+
</React.Fragment>
43+
))
44+
}
45+
46+
return (
47+
<div className="show-note">
48+
<h2>{showNote.title}</h2>
49+
<p>Date: {showNote.date}</p>
50+
<div>{formatContent(showNote.content)}</div>
51+
</div>
52+
)
53+
}
54+
55+
const Inputs = ({ onNewShowNote }) => {
12256
// State variables
123-
const [youtubeUrl, setYoutubeUrl] = useState('')
57+
const [youtubeUrl, setYoutubeUrl] = useState('https://www.youtube.com/watch?v=MORMZXEaONk')
12458
const [transcriptionService, setTranscriptionService] = useState('whisper')
125-
const [whisperModel, setWhisperModel] = useState('large-v3-turbo')
126-
const [llmService, setLlmService] = useState('chatgpt')
127-
const [llmModel, setLlmModel] = useState('gpt-4o')
128-
const [selectedPrompts, setSelectedPrompts] = useState([])
59+
const [whisperModel, setWhisperModel] = useState('base')
60+
const [llmService, setLlmService] = useState('none')
61+
const [llmModel, setLlmModel] = useState('')
62+
const [selectedPrompts, setSelectedPrompts] = useState(['summary'])
12963
const [result, setResult] = useState(null)
13064
const [error, setError] = useState(null)
13165
const [isLoading, setIsLoading] = useState(false)
@@ -201,6 +135,7 @@ const Form = ({ onNewShowNote }) => {
201135
<div className="form-group">
202136
<label htmlFor="youtubeUrl">YouTube URL</label>
203137
<input
138+
// placeholder="https://www.youtube.com/watch?v=MORMZXEaONk"
204139
type="text"
205140
id="youtubeUrl"
206141
value={youtubeUrl}
@@ -322,4 +257,56 @@ const Form = ({ onNewShowNote }) => {
322257
)
323258
}
324259

260+
const Form = () => {
261+
const [showNotes, setShowNotes] = useState([])
262+
263+
// Fetch show notes function
264+
const fetchShowNotes = () => {
265+
fetch('http://localhost:3000/show-notes')
266+
.then((response) => response.json())
267+
.then((data) => {
268+
setShowNotes(data.showNotes)
269+
})
270+
.catch((error) => {
271+
console.error('Error fetching show notes:', error)
272+
})
273+
}
274+
275+
useEffect(() => {
276+
fetchShowNotes()
277+
}, [])
278+
279+
return (
280+
<div className="container">
281+
<Inputs client:only="react" onNewShowNote={fetchShowNotes} />
282+
</div>
283+
)
284+
285+
// return (
286+
// <Router>
287+
// <div className="container">
288+
// <h1>Show Notes</h1>
289+
// <Routes>
290+
// <Route
291+
// path="/"
292+
// element={
293+
// <>
294+
// <ul className="show-notes-list">
295+
// {showNotes.map((note) => (
296+
// <li key={note.id}>
297+
// <Link to={`/show-notes/${note.id}`}>{note.title}</Link> - {note.date}
298+
// </li>
299+
// ))}
300+
// </ul>
301+
// <Input onNewShowNote={fetchShowNotes} />
302+
// </>
303+
// }
304+
// />
305+
// <Route path="/show-notes/:id" element={<ShowNote />} />
306+
// </Routes>
307+
// </div>
308+
// </Router>
309+
// )
310+
}
311+
325312
export default Form

‎packages/astro/src/pages/app.astro

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
import PageLayout from "@/layouts/Base.astro";
3+
import Form from "@/components/app/Form";
4+
---
5+
6+
<PageLayout meta={{ title: "Home" }}>
7+
<section>
8+
<h1>Generate Show Notes</h1>
9+
<Form client:only="react" />
10+
</section>
11+
</PageLayout>

0 commit comments

Comments
 (0)