Add form loader

prisma/schema.prisma

@@ -169,34 +169,34 @@ model AiSummaryEntry {
   text        String
   description String?
   showNote    Int
-  aiShowNote  AiShowNote @relation(fields: [showNote], references: [id])
+  aiShowNote  AiShowNote @relation(fields: [showNote], references: [id], onDelete: Cascade)
 }
 
 model AiTweet {
   id         Int        @id @default(autoincrement())
   content    String     @db.VarChar(350)
   showNote   Int
-  aiShowNote AiShowNote @relation(fields: [showNote], references: [id])
+  aiShowNote AiShowNote @relation(fields: [showNote], references: [id], onDelete: Cascade)
 }
 
 model Link {
   id         Int        @id @default(autoincrement())
   name       String
   url        String
   showNote   Int
-  aiShowNote AiShowNote @relation(fields: [showNote], references: [id])
+  aiShowNote AiShowNote @relation(fields: [showNote], references: [id], onDelete: Cascade)
 }
 
 model AiGuest {
   id         Int        @id @default(autoincrement())
   name       String
   showNote   Int
-  aiShowNote AiShowNote @relation(fields: [showNote], references: [id])
+  aiShowNote AiShowNote @relation(fields: [showNote], references: [id], onDelete: Cascade)
 }
 
 model Topic {
   id         Int        @id @default(autoincrement())
   name       String
   showNote   Int
-  aiShowNote AiShowNote @relation(fields: [showNote], references: [id])
+  aiShowNote AiShowNote @relation(fields: [showNote], references: [id], onDelete: Cascade)
 }

src/lib/FormWithLoader.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { applyAction } from '$app/forms';
+	import { invalidateAll } from '$app/navigation';
+	import { enhance } from '$app/forms';
+	import toast from 'svelte-french-toast';
+	import { ActionResult } from '@sveltejs/kit';
+	import { loading } from '$state/loading';
+	let formLoading = false;
+	export let global = true; // By default, the global loader UI is used
+
+	type FormActionMessage = {
+		message?: string;
+	};
+
+	export const form_action = (
+		opts?: FormActionMessage,
+		callback?: (data: any | unknown) => any
+	) => {
+		return function form_enhance() {
+			if (global) {
+				loading.setLoading(true);
+			}
+			formLoading = true;
+			return async ({ result }: { result: ActionResult<any, any> }) => {
+				if (result.type === 'success') {
+					toast.success('Siiiiick ' + result.data.message + ' was a success');
+				} else if (result.type === 'error') {
+					console.log(result);
+					toast.error(`Major bummer: ${result.error.message}`);
+				} else {
+					toast.error(`Something went wrong. Check the console`);
+					console.log(result);
+				}
+				await invalidateAll();
+				await applyAction(result);
+				formLoading = false;
+				if (global) {
+					loading.setLoading(false);
+				}
+				if (callback && 'data' in result && result?.data) callback(result.data);
+			};
+		};
+	};
+</script>
+
+<form {...$$restProps} use:enhance={form_action()}>
+	<slot loading={formLoading} />
+</form>

src/lib/form_action.ts

@@ -12,16 +12,16 @@ export const form_action = (opts?: FormActionMessage, callback?: (data: any | un
 	return function form_enhance() {
 		loading.setLoading(true);
 		return async ({ result }: { result: ActionResult<any, any> }) => {
-      console.log(result);
+			console.log(result);
 			if (result.type === 'success') {
 				toast.success('Siiiiick ' + result.data.message + ' was a success');
 			} else if (result.type === 'error') {
-        console.log(result);
+				console.log(result);
 				toast.error(`Major bummer: ${result.error.message}`);
 			} else {
-        toast.error(`Something went wrong. Check the console`);
-        console.log(result);
-      }
+				toast.error(`Something went wrong. Check the console`);
+				console.log(result);
+			}
 			await invalidateAll();
 			await applyAction(result);
 			loading.setLoading(false);

src/routes/admin/shows/+page.server.ts

@@ -2,6 +2,7 @@ import { import_or_update_all_shows } from '$server/shows';
 import { error } from '@sveltejs/kit';
 import { get_transcript } from '$server/transcripts/deepgram';
 import { aiNoteRequestHandler } from '$server/ai/requestHandlers';
+import wait from 'waait';
 
 export const load = async ({ locals }) => {
 	return {
@@ -52,5 +53,10 @@ export const actions = {
 		console.log('🤖 transcript fetch requested');
 		return { message: 'Transcript Fetch Requestd' };
 	},
-	fetch_AI_notes: aiNoteRequestHandler
+	fetch_AI_notes: aiNoteRequestHandler,
+	test_me: async ({ request }) => {
+		console.log('🤖 test me requested');
+		await wait(2000);
+		return { message: 'Transcript Fetch Requestd' };
+	}
 };

src/routes/admin/shows/+page.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
 	import { enhance } from '$app/forms';
+	import FormWithLoader from '$lib/FormWithLoader.svelte';
+	import FormButton from '$lib/FormWithLoader.svelte';
 	import { form_action } from '$lib/form_action';
 	import { format } from 'date-fns';
-
 	export let data;
 	$: ({ shows } = data);
 </script>
@@ -66,16 +67,27 @@
 						</form>
 					{/if}</td
 				>
-				<td class="center"
-					>{#if show.aiShowNote}
-						✅
-					{:else}
-						<form action="?/fetch_AI_notes" method="post" use:enhance={form_action()}>
+				<td class="center">
+					<FormWithLoader global={false} action="?/test_me" method="post" let:loading>
+						<fieldset disabled={loading}>
 							<input type="hidden" name="show_number" value={show.number} />
+							{#if show.aiShowNote}
+								✅
+								<button type="submit"> Refetch{loading ? 'ing' : ''}</button>
+							{:else}
+								<button type="submit">Fetch{loading ? 'ing' : ''}</button>
+							{/if}
+						</fieldset>
+					</FormWithLoader>
+					<!-- <form action="?/fetch_AI_notes" method="post" use:enhance={form_action()}>
+						<input type="hidden" name="show_number" value={show.number} />
+						{#if show.aiShowNote}
+							✅ <button type="submit">Refetch</button>
+						{:else}
 							<button type="submit">Fetch</button>
-						</form>
-					{/if}</td
-				>
+						{/if}
+					</form> -->
+				</td>
 			</tr>
 		{/each}
 	</tbody>
@@ -90,6 +102,11 @@
 		left: -12.5%;
 		position: relative;
 	}
+	fieldset {
+		border: none;
+		margin: 0;
+		padding: 0;
+	}
 	th {
 		padding: 10px;
 		text-align: left;

src/server/ai/openai.ts

@@ -109,7 +109,7 @@ export async function condense(
 		})
 		.map((result) => result.value);
 
-	console.log(`Saving condensed file for ${show.number}`);
+	console.log(`Finished condensng ${show.number}`);
 	return utterances;
 }
 

src/server/ai/prompts.ts

@@ -5,21 +5,30 @@ export const grammarPrompt = `Apply spelling, grammar and incorrectly transcribe
 
 export const midjourney = `simple vector. visualization of accepting money online, in the style of Netflix movie cover, golden yellow background. black and white , monochrome. painted illustrations, grainy. --v 5 --ar 16:9`;
 
-export const summarizePrompt = `Summarize the provided podcast transcript into very succinct bullet points, each containing just a few words. The bullet points should correspond to sections or topics discussed in the podcast with points at least every 3-5 minutes. For each bullet point, you may also provide a longer 1-2 sentence summary of the topic if necessary, which may also include the hosts opinions, thoughts. Do not skip topics.
+export const misspellings = `
+Please replace all instances of the following words with the correct spelling:
+
+1. Replace "Century" with "Sentry"
+2. Replace "Cintax" and "Cintacs" with "Syntax"
+`;
+
+export const summarizePrompt = `Summarize the provided podcast transcript into very succinct bullet points, each containing just a few words. The bullet points should correspond to sections or topics discussed in the podcast with points at least every 3-5 minutes. For each bullet point, you may also provide a longer 1-2 sentence summary of the topic if necessary, which may also include the host's opinions, names and thoughts. Do not skip topics.
 
 Remember, the key here is to read through the transcript carefully, identify all points, topics, questions and even banter, and then condense each one into a very brief, clear statement. It's also important to include timestamps if they're provided in the transcript, as they can help give a sense of the flow and structure of the podcast.
 
 Additionally, Please create the following for this podcast episode:
 
 1. 1-2 sentence description about what is covered in the podcast. This should be a short, catchy, and interesting description. It should provoke the listener to stop what they are doing and listen to the podcast.
 2. 6-7 tweets for this podcast episode. These tweets should be short, catchy, and interesting. They should provoke the twitter user to respond an join in the conversation. Do not add any hashtags or emojis. Use exclamation points sparingly.
-3. 6-7 tweets about this podcast that can be tweeted by listeners of the show. Some examples are "This is a fantastic episode about ___", or "I really enjoyed the part about ____". They should mention @syntaxfm
+3. 6-7 tweets about this podcast that can be tweeted by listeners of the show. Some examples are "This is a fantastic episode about ___", or "I really enjoyed the part about ____". They should mention @syntaxfm. Do not add any hashtags or emojis. Use exclamation points sparingly.
 4. 3-4 hashtags that categorize the episode. these will be used as topic tags on the website.
 5. A summary of the podcast into a title. It should be catchy, slightly click-baity, mention a few topics covered and make the listener want to stop what they are doing and watch it.
 6. Keep track of any links or websites mentioned in the podcast. These will be used as links on the website. If you can't find the link, provide only the name of the website.
 7. tally the time each speaker speaks by using the provided timestamps. Do not guess.
 8. Provide a list of guest names. If the transcript doesn't include their real name, try to infer it.
 
+${misspellings}
+
 If you, the AI, have feedback or clarifications on your response, please put them in the notes section.
 
 Return each of these things in JSON format that looks like this:
@@ -33,6 +42,5 @@ Return each of these things in JSON format that looks like this:
   "listener_tweets": ["..."],
   "topics": ["...", "..."],
   "links": [{ "name": "Name of link", "url": "https://example.com"}, "..."],
-  "speaker_times": [{"name": "Wes Bos", "time": "02:33"}, "..."],
   "guests": ["..."]
 }`;

src/server/ai/requestHandlers.ts

@@ -5,6 +5,7 @@ import { generate_ai_notes } from './openai';
 export async function aiNoteRequestHandler({ request, locals }: RequestEvent) {
 	const data = await request.formData();
 	const show_number = parseInt(data.get('show_number')?.toString() || '');
+
 	if (!show_number) {
 		throw error(400, 'Invalid Show Number');
 	}
@@ -17,11 +18,20 @@ export async function aiNoteRequestHandler({ request, locals }: RequestEvent) {
 	if (!show?.transcript) {
 		throw error(400, 'No show, or no transcript for this show');
 	}
+	// delete any existing ai notes
+	await locals.prisma.aiShowNote.deleteMany({
+		where: {
+			show: {
+				number: show_number
+			}
+		}
+	});
 
 	// Get the AI transcript for this show
 	const result = await generate_ai_notes(show);
 	// Save to DB
 	console.log(`🤖 Saving AI Notes to DB for Show ${show_number}`);
+	console.dir(result);
 	const dbResponse = await locals.prisma.aiShowNote.create({
 		data: {
 			show: {