Changes to audioscribe.scroll.pub

root

25 days ago

Initial commit

body.html

Changed around line 1
+ 
+   AudioScribe
+   Record audio, convert to text, and get summaries instantly.
+ 
+ 
+ 
+   
+     
+     
+     
+   
+ 
+   
+     Transcription
+     
+ 
+     Summary
+     
+   
+ 
+ 
+ 
+   Your audio is processed locally - no data is sent to servers.
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://audioscribe.scroll.pub
+ metaTags
+ editButton /edit.html
+ title AudioScribe - Record, Transcribe, Summarize
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "id": "63bcdfcc-37e8-44a3-b105-bfe46490eb8c",
+   "object": "chat.completion",
+   "created": 1735330977,
+   "model": "deepseek-chat",
+   "choices": [
+     {
+       "index": 0,
+       "message": {
+         "role": "assistant",
+         "content": "---domain---\naudioscribe.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://audioscribe.scroll.pub\nmetaTags\neditButton /edit.html\ntitle AudioScribe - Record, Transcribe, Summarize\nstyle.css\nbody.html\nscript.js\n---body.html---\n\n  AudioScribe\n  Record audio, convert to text, and get summaries instantly.
\n\n\n\n  \n    \n    
\n    \n  \n\n  \n    Transcription\n    
\n    \n    Summary\n    
\n  \n\n\n\n  Your audio is processed locally - no data is sent to servers.
\n\n---style.css---\n:root {\n  --primary: #2563eb;\n  --primary-hover: #1d4ed8;\n  --text: #1e293b;\n  --background: #f8fafc;\n  --card: #ffffff;\n  --shadow: 0 1px 3px rgba(0,0,0,0.1);\n}\n\nbody {\n  font-family: system-ui, -apple-system, sans-serif;\n  color: var(--text);\n  background: var(--background);\n  margin: 0;\n  padding: 2rem;\n  min-height: 100vh;\n  display: grid;\n  place-items: center;\n}\n\nheader {\n  text-align: center;\n  margin-bottom: 2rem;\n}\n\nh1 {\n  font-size: 2.5rem;\n  color: var(--primary);\n  margin: 0;\n}\n\nmain {\n  background: var(--card);\n  padding: 2rem;\n  border-radius: 1rem;\n  box-shadow: var(--shadow);\n  max-width: 600px;\n  width: 100%;\n}\n\n.recorder {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  align-items: center;\n}\n\n#recordButton {\n  background: var(--primary);\n  color: white;\n  border: none;\n  padding: 1rem 2rem;\n  border-radius: 0.5rem;\n  font-size: 1.2rem;\n  cursor: pointer;\n  transition: background 0.2s;\n}\n\n#recordButton:hover {\n  background: var(--primary-hover);\n}\n\n#audioVisualizer {\n  width: 100%;\n  height: 100px;\n  background: #e2e8f0;\n  border-radius: 0.5rem;\n}\n\n.results {\n  margin-top: 2rem;\n}\n\nfooter {\n  text-align: center;\n  margin-top: 2rem;\n  color: #64748b;\n}\n\n@media (max-width: 600px) {\n  body {\n    padding: 1rem;\n  }\n  \n  main {\n    padding: 1rem;\n  }\n}\n---script.js---\nlet mediaRecorder;\nlet audioChunks = [];\nlet isRecording = false;\n\nconst recordButton = document.getElementById('recordButton');\nconst audioPlayback = document.getElementById('audioPlayback');\nconst transcription = document.getElementById('transcription');\nconst summary = document.getElementById('summary');\nconst resultsSection = document.querySelector('.results');\n\nrecordButton.addEventListener('click', async () => {\n  if (!isRecording) {\n    try {\n      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });\n      mediaRecorder = new MediaRecorder(stream);\n      \n      mediaRecorder.ondataavailable = event => {\n        audioChunks.push(event.data);\n      };\n      \n      mediaRecorder.onstop = async () => {\n        const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });\n        audioPlayback.src = URL.createObjectURL(audioBlob);\n        audioPlayback.hidden = false;\n        \n        const audioData = await blobToBase64(audioBlob);\n        processAudio(audioData);\n      };\n      \n      mediaRecorder.start();\n      isRecording = true;\n      recordButton.textContent = '⏹ Stop';\n    } catch (error) {\n      alert('Error accessing microphone');\n    }\n  } else {\n    mediaRecorder.stop();\n    isRecording = false;\n    recordButton.textContent = '🎤 Record';\n  }\n});\n\nasync function processAudio(audioData) {\n  try {\n    // Initialize transformers.js\n    const { pipeline } = await import('./transformers.js');\n    const transcriber = await pipeline('automatic-speech-recognition', 'openai/whisper-tiny');\n    \n    // Transcribe audio\n    const transcriptionResult = await transcriber(audioData);\n    transcription.textContent = transcriptionResult.text;\n    \n    // Summarize text\n    const summarizer = await pipeline('summarization', 'facebook/bart-large-cnn');\n    const summaryResult = await summarizer(transcriptionResult.text);\n    summary.textContent = summaryResult[0].summary_text;\n    \n    resultsSection.hidden = false;\n  } catch (error) {\n    console.error('Error processing audio:', error);\n    alert('Error processing audio');\n  }\n}\n\nfunction blobToBase64(blob) {\n  return new Promise((resolve, reject) => {\n    const reader = new FileReader();\n    reader.onloadend = () => resolve(reader.result.split(',')[1]);\n    reader.onerror = reject;\n    reader.readAsDataURL(blob);\n  });\n}\n---end---"
+       },
+       "logprobs": null,
+       "finish_reason": "stop"
+     }
+   ],
+   "usage": {
+     "prompt_tokens": 258,
+     "completion_tokens": 1259,
+     "total_tokens": 1517,
+     "prompt_cache_hit_tokens": 0,
+     "prompt_cache_miss_tokens": 258
+   },
+   "system_fingerprint": "fp_f1afce2943"
+ }

readme.scroll

Changed around line 1

+ # audioscribe.scroll.pub

+ Website generated by DeepSeek from prompt: a webapp that records users audio; uses tranformers.js and convert audio to text and summaerizes text

script.js

Changed around line 1
+ let mediaRecorder;
+ let audioChunks = [];
+ let isRecording = false;
+ 
+ const recordButton = document.getElementById('recordButton');
+ const audioPlayback = document.getElementById('audioPlayback');
+ const transcription = document.getElementById('transcription');
+ const summary = document.getElementById('summary');
+ const resultsSection = document.querySelector('.results');
+ 
+ recordButton.addEventListener('click', async () => {
+   if (!isRecording) {
+     try {
+       const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+       mediaRecorder = new MediaRecorder(stream);
+ 
+       mediaRecorder.ondataavailable = event => {
+         audioChunks.push(event.data);
+       };
+ 
+       mediaRecorder.onstop = async () => {
+         const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
+         audioPlayback.src = URL.createObjectURL(audioBlob);
+         audioPlayback.hidden = false;
+ 
+         const audioData = await blobToBase64(audioBlob);
+         processAudio(audioData);
+       };
+ 
+       mediaRecorder.start();
+       isRecording = true;
+       recordButton.textContent = '⏹ Stop';
+     } catch (error) {
+       alert('Error accessing microphone');
+     }
+   } else {
+     mediaRecorder.stop();
+     isRecording = false;
+     recordButton.textContent = '🎤 Record';
+   }
+ });
+ 
+ async function processAudio(audioData) {
+   try {
+     // Initialize transformers.js
+     const { pipeline } = await import('./transformers.js');
+     const transcriber = await pipeline('automatic-speech-recognition', 'openai/whisper-tiny');
+ 
+     // Transcribe audio
+     const transcriptionResult = await transcriber(audioData);
+     transcription.textContent = transcriptionResult.text;
+ 
+     // Summarize text
+     const summarizer = await pipeline('summarization', 'facebook/bart-large-cnn');
+     const summaryResult = await summarizer(transcriptionResult.text);
+     summary.textContent = summaryResult[0].summary_text;
+ 
+     resultsSection.hidden = false;
+   } catch (error) {
+     console.error('Error processing audio:', error);
+     alert('Error processing audio');
+   }
+ }
+ 
+ function blobToBase64(blob) {
+   return new Promise((resolve, reject) => {
+     const reader = new FileReader();
+     reader.onloadend = () => resolve(reader.result.split(',')[1]);
+     reader.onerror = reject;
+     reader.readAsDataURL(blob);
+   });
+ }

style.css

Changed around line 1
+ :root {
+   --primary: #2563eb;
+   --primary-hover: #1d4ed8;
+   --text: #1e293b;
+   --background: #f8fafc;
+   --card: #ffffff;
+   --shadow: 0 1px 3px rgba(0,0,0,0.1);
+ }
+ 
+ body {
+   font-family: system-ui, -apple-system, sans-serif;
+   color: var(--text);
+   background: var(--background);
+   margin: 0;
+   padding: 2rem;
+   min-height: 100vh;
+   display: grid;
+   place-items: center;
+ }
+ 
+ header {
+   text-align: center;
+   margin-bottom: 2rem;
+ }
+ 
+ h1 {
+   font-size: 2.5rem;
+   color: var(--primary);
+   margin: 0;
+ }
+ 
+ main {
+   background: var(--card);
+   padding: 2rem;
+   border-radius: 1rem;
+   box-shadow: var(--shadow);
+   max-width: 600px;
+   width: 100%;
+ }
+ 
+ .recorder {
+   display: flex;
+   flex-direction: column;
+   gap: 1rem;
+   align-items: center;
+ }
+ 
+ #recordButton {
+   background: var(--primary);
+   color: white;
+   border: none;
+   padding: 1rem 2rem;
+   border-radius: 0.5rem;
+   font-size: 1.2rem;
+   cursor: pointer;
+   transition: background 0.2s;
+ }
+ 
+ #recordButton:hover {
+   background: var(--primary-hover);
+ }
+ 
+ #audioVisualizer {
+   width: 100%;
+   height: 100px;
+   background: #e2e8f0;
+   border-radius: 0.5rem;
+ }
+ 
+ .results {
+   margin-top: 2rem;
+ }
+ 
+ footer {
+   text-align: center;
+   margin-top: 2rem;
+   color: #64748b;
+ }
+ 
+ @media (max-width: 600px) {
+   body {
+     padding: 1rem;
+   }
+ 
+   main {
+     padding: 1rem;
+   }
+ }