commit 62dcc84d7954472049ac3ce265691a0dfea8a2f7
Author: root <root@hub.scroll.pub>
Date: 2024-12-27 20:23:14 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..b29e461
--- /dev/null
+++ b/body.html
@@ -0,0 +1,24 @@
+<header>
+ <h1>AudioScribe</h1>
+ <p>Record audio, convert to text, and get summaries instantly.</p>
+</header>
+
+<main>
+ <section class="recorder">
+ <button id="recordButton" aria-label="Start recording">🎤 Record</button>
+ <div id="audioVisualizer"></div>
+ <audio id="audioPlayback" controls hidden></audio>
+ </section>
+
+ <section class="results" hidden>
+ <h2>Transcription</h2>
+ <div id="transcription" aria-live="polite"></div>
+
+ <h2>Summary</h2>
+ <div id="summary" aria-live="polite"></div>
+ </section>
+</main>
+
+<footer>
+ <p>Your audio is processed locally - no data is sent to servers.</p>
+</footer>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..cd2762f
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://audioscribe.scroll.pub
+metaTags
+editButton /edit.html
+title AudioScribe - Record, Transcribe, Summarize
+style.css
+body.html
+script.js
\ No newline at end of file
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..0ab849e
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,25 @@
+{
+ "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<header>\n <h1>AudioScribe</h1>\n <p>Record audio, convert to text, and get summaries instantly.</p>\n</header>\n\n<main>\n <section class=\"recorder\">\n <button id=\"recordButton\" aria-label=\"Start recording\">🎤 Record</button>\n <div id=\"audioVisualizer\"></div>\n <audio id=\"audioPlayback\" controls hidden></audio>\n </section>\n\n <section class=\"results\" hidden>\n <h2>Transcription</h2>\n <div id=\"transcription\" aria-live=\"polite\"></div>\n \n <h2>Summary</h2>\n <div id=\"summary\" aria-live=\"polite\"></div>\n </section>\n</main>\n\n<footer>\n <p>Your audio is processed locally - no data is sent to servers.</p>\n</footer>\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"
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..9d1a7a1
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# 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
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..2293d15
--- /dev/null
+++ b/script.js
@@ -0,0 +1,72 @@
+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);
+ });
+}
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..0d9a18b
--- /dev/null
+++ b/style.css
@@ -0,0 +1,88 @@
+: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;
+ }
+}
\ No newline at end of file