root

21 days ago

Initial commit

.stats.json

Changed around line 1
+ {
+   "files": [
+     "body.html",
+     "index.scroll",
+     "prompt.json",
+     "readme.scroll",
+     "script.js",
+     "style.css"
+   ],
+   "hasSslCert": false,
+   "stats": {
+     "folder": "speaksum1.scroll.pub",
+     "folderLink": "http://speaksum1.scroll.pub",
+     "created": "2025-01-01T10:53:01.000Z",
+     "revised": "2025-01-01T10:53:01.000Z",
+     "files": 6,
+     "mb": 1,
+     "revisions": 1,
+     "hash": "0e173ddf50"
+   }
+ }

body.html

Changed around line 1

SpeakSum

+ ☀️

+ 🌙

Convert Speech to Text and Get Instant Summaries

Speak naturally and get both transcription and smart summaries in seconds

Transform Speech to Text & Get Instant Summaries

Speak naturally and get both transcription and summarization in real-time

- 🎤

- Start Speaking

+ 🎤

+ Start Recording

- ⏹️

- Stop

+ ⬛

+ Stop Recording

Transcript

+       
+         Transcription
+         
-         Summary
-         
+         Summary
+         
-   Made with care by SpeakSum
+   Built with care by SpeakSum team
+   
+     Privacy Policy
+     Terms of Use
+     Contact
+   

index.html

Changed around line 1
+ 
+ 
+ 
+  
+  SpeakSum - Speech to Text & Summary
+  
+  
+  
+  
+  
+  
+  
+  
+  
+ 
+  
+ 
+  
+ 
+ 
+ 
+ 
+ 
+   
+     SpeakSum
+   
+ 
+ 
+ 
+   
+     Convert Speech to Text and Get Instant Summaries
+     Speak naturally and get both transcription and smart summaries in seconds
+   
+ 
+   
+     
+       
+         🎤
+         Start Speaking
+       
+       
+         ⏹️
+         Stop
+       
+     
+ 
+     
+       
+         Transcript
+         
+       
+ 
+       
+         Summary
+         
+       
+     
+   
+ 
+ 
+ 
+   Made with care by SpeakSum
+ 
+ 
+ 
+ 
+ 

index.scroll

Changed around line 1

+ description "Convert speech to text and get instant summaries. Free, fast, and easy to use speech recognition and text summarization tool."

+ keywords "speech to text, voice recognition, text summarization, speech summarization, voice to text"

- title SpeakSum - Speech to Text & Summary

+ title SpeakSum - Speech to Text & Summarization

prompt.json

Changed around line 1

- "id": "msg_01BQzZ9qbe816kSHp4bKrvjE",

+ "id": "msg_01L9zz6dGoctbUB71NCQPkgg",

- "text": "Here's a complete website design for a speech-to-text conversion and summarization tool:\n\n---domain---\nspeaksum.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://speaksum.scroll.pub\nmetaTags\neditButton /edit.html\ntitle SpeakSum - Speech to Text & Summary\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n

\n \n

\n\n

Convert Speech to Text and Get Instant Summaries

Speak naturally and get both transcription and smart summaries in seconds

\n\n

\n \n \n

\n\n

Transcript

\n \n

Summary

\n\n\n\n---style.css---\n:root {\n --primary-color: #4a90e2;\n --secondary-color: #2c3e50;\n --accent-color: #e74c3c;\n --background: #f5f6fa;\n --text-color: #2c3e50;\n --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Segoe UI', system-ui, sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n background: var(--background);\n}\n\nheader {\n background: white;\n padding: 1rem;\n box-shadow: var(--box-shadow);\n}\n\nh1 {\n font-size: 2rem;\n color: var(--secondary-color);\n}\n\nh1 span {\n color: var(--primary-color);\n}\n\n.hero {\n text-align: center;\n padding: 4rem 2rem;\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n color: white;\n}\n\n.hero h2 {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n}\n\n.converter {\n max-width: 1200px;\n margin: 2rem auto;\n padding: 0 1rem;\n}\n\n.controls {\n display: flex;\n gap: 1rem;\n justify-content: center;\n margin-bottom: 2rem;\n}\n\n.primary-btn, .secondary-btn {\n padding: 1rem 2rem;\n border: none;\n border-radius: 50px;\n cursor: pointer;\n font-size: 1rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n transition: transform 0.2s;\n}\n\n.primary-btn {\n background: var(--primary-color);\n color: white;\n}\n\n.secondary-btn {\n background: var(--secondary-color);\n color: white;\n}\n\n.primary-btn:hover, .secondary-btn:hover {\n transform: translateY(-2px);\n}\n\n.output-container {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 2rem;\n}\n\n.output-box {\n background: white;\n border-radius: 10px;\n padding: 1rem;\n min-height: 300px;\n box-shadow: var(--box-shadow);\n}\n\nh3 {\n margin-bottom: 1rem;\n color: var(--secondary-color);\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n background: white;\n margin-top: 4rem;\n}\n\n@media (max-width: 768px) {\n .output-container {\n grid-template-columns: 1fr;\n }\n \n .hero h2 {\n font-size: 2rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const startBtn = document.getElementById('startBtn');\n const stopBtn = document.getElementById('stopBtn');\n const transcript = document.getElementById('transcript');\n const summary = document.getElementById('summary');\n\n let recognition = null;\n \n if ('webkitSpeechRecognition' in window) {\n recognition = new webkitSpeechRecognition();\n recognition.continuous = true;\n recognition.interimResults = true;\n } else {\n startBtn.disabled = true;\n transcript.innerHTML = 'Speech recognition is not supported in this browser.';\n }\n\n function summarizeText(text) {\n // Simple summarization algorithm (example)\n const sentences = text.split(/[.!?]+/);\n const significantSentences = sentences\n .filter(sentence => sentence.length > 10)\n .slice(0, 3);\n return significantSentences.join('. ') + '.';\n }\n\n if (recognition) {\n recognition.onresult = (event) => {\n let finalTranscript = '';\n \n for (let i = event.resultIndex; i < event.results.length; i++) {\n const transcript = event.results[i][0].transcript;\n if (event.results[i].isFinal) {\n finalTranscript += transcript + ' ';\n }\n }\n\n if (finalTranscript) {\n transcript.textContent = finalTranscript;\n summary.textContent = summarizeText(finalTranscript);\n }\n };\n\n startBtn.addEventListener('click', () => {\n transcript.textContent = '';\n summary.textContent = '';\n recognition.start();\n startBtn.disabled = true;\n stopBtn.disabled = false;\n });\n\n stopBtn.addEventListener('click', () => {\n recognition.stop();\n startBtn.disabled = false;\n stopBtn.disabled = true;\n });\n\n recognition.onerror = (event) => {\n console.error('Speech recognition error:', event.error);\n startBtn.disabled = false;\n stopBtn.disabled = true;\n };\n }\n});\n\n---end---\n\nThis implementation features:\n\n1. Clean, semantic HTML5 structure\n2. Beautiful gradient-based design with smooth animations\n3. Responsive layout that works well on mobile devices\n4. Real-time speech recognition using the Web Speech API\n5. Basic text summarization functionality\n6. Accessible controls and ARIA-compliant markup\n7. Modern CSS with variables and flexible layouts\n8. Error handling and browser compatibility checks\n9. Smooth transitions and hover effects\n10. Professional typography and spacing\n\nThe site uses a two-column layout for desktop that gracefully collapses to a single column on mobile devices. The color scheme is professional and modern, with careful attention to contrast and readability."

+ "text": "Here's a speech-to-text conversion and summarization website:\n\n---domain---\nspeaksum.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://speaksum.scroll.pub\nmetaTags\n description \"Convert speech to text and get instant summaries. Free, fast, and easy to use speech recognition and text summarization tool.\"\n keywords \"speech to text, voice recognition, text summarization, speech summarization, voice to text\"\neditButton /edit.html\ntitle SpeakSum - Speech to Text & Summarization\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n

\n \n

\n\n

Transform Speech to Text & Get Instant Summaries

Speak naturally and get both transcription and summarization in real-time

\n\n

\n \n \n

\n\n

Transcription

\n \n

Summary

\n\n\n\n---style.css---\n:root {\n --primary-color: #6366f1;\n --bg-color: #ffffff;\n --text-color: #1f2937;\n --border-color: #e5e7eb;\n --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n --gradient: linear-gradient(135deg, #6366f1, #8b5cf6);\n}\n\n[data-theme=\"dark\"] {\n --bg-color: #1f2937;\n --text-color: #f3f4f6;\n --border-color: #374151;\n --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: system-ui, -apple-system, sans-serif;\n background: var(--bg-color);\n color: var(--text-color);\n line-height: 1.6;\n transition: background-color 0.3s, color 0.3s;\n}\n\nheader {\n padding: 1rem;\n background: var(--bg-color);\n box-shadow: var(--box-shadow);\n position: sticky;\n top: 0;\n z-index: 100;\n}\n\nnav {\n max-width: 1200px;\n margin: 0 auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: bold;\n background: var(--gradient);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.theme-toggle {\n background: none;\n border: none;\n cursor: pointer;\n font-size: 1.2rem;\n}\n\nmain {\n max-width: 1200px;\n margin: 0 auto;\n padding: 2rem 1rem;\n}\n\n.hero {\n text-align: center;\n margin-bottom: 3rem;\n}\n\n.hero h1 {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n background: var(--gradient);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.controls {\n display: flex;\n gap: 1rem;\n justify-content: center;\n margin-bottom: 2rem;\n}\n\n.primary-btn {\n padding: 0.75rem 1.5rem;\n border: none;\n border-radius: 0.5rem;\n background: var(--gradient);\n color: white;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 1rem;\n transition: transform 0.2s, opacity 0.2s;\n}\n\n.primary-btn:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.primary-btn:not(:disabled):hover {\n transform: translateY(-2px);\n}\n\n.output-container {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 2rem;\n}\n\n.text-output {\n min-height: 300px;\n padding: 1rem;\n border: 1px solid var(--border-color);\n border-radius: 0.5rem;\n background: var(--bg-color);\n margin-top: 1rem;\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n background: var(--bg-color);\n border-top: 1px solid var(--border-color);\n}\n\nfooter nav {\n display: flex;\n justify-content: center;\n gap: 2rem;\n margin-top: 1rem;\n}\n\nfooter a {\n color: var(--text-color);\n text-decoration: none;\n}\n\n@media (max-width: 768px) {\n .output-container {\n grid-template-columns: 1fr;\n }\n \n .hero h1 {\n font-size: 2rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const startBtn = document.getElementById('startBtn');\n const stopBtn = document.getElementById('stopBtn');\n const transcriptionOutput = document.getElementById('transcription');\n const summaryOutput = document.getElementById('summary');\n const themeToggle = document.querySelector('.theme-toggle');\n \n let recognition = null;\n let isRecording = false;\n\n // Theme handling\n const toggleTheme = () => {\n const isDark = document.body.getAttribute('data-theme') === 'dark';\n document.body.setAttribute('data-theme', isDark ? 'light' : 'dark');\n localStorage.setItem('theme', isDark ? 'light' : 'dark');\n };\n\n themeToggle.addEventListener('click', toggleTheme);\n\n // Set initial theme\n const savedTheme = localStorage.getItem('theme') || 'light';\n document.body.setAttribute('data-theme', savedTheme);\n\n // Speech recognition setup\n if ('webkitSpeechRecognition' in window) {\n recognition = new webkitSpeechRecognition();\n recognition.continuous = true;\n recognition.interimResults = true;\n\n recognition.onresult = (event) => {\n let finalTranscript = '';\n \n for (let i = event.resultIndex; i < event.results.length; i++) {\n const transcript = event.results[i][0].transcript;\n if (event.results[i].isFinal) {\n finalTranscript += transcript;\n }\n }\n\n if (finalTranscript) {\n transcriptionOutput.textContent = finalTranscript;\n generateSummary(finalTranscript);\n }\n };\n\n recognition.onerror = (event) => {\n console.error('Speech recognition error:', event.error);\n stopRecording();\n };\n }\n\n // Recording controls\n const startRecording = () => {\n if (!recognition) {\n alert('Speech recognition is not supported in your browser.');\n return;\n }\n\n recognition.start();\n isRecording = true;\n startBtn.disabled = true;\n stopBtn.disabled = false;\n startBtn.style.opacity = '0.6';\n };\n\n const stopRecording = () => {\n if (recognition) {\n recognition.stop();\n }\n isRecording = false;\n startBtn.disabled = false;\n stopBtn.disabled = true;\n startBtn.style.opacity = '1';\n };\n\n // Simple summarization function (basic implementation)\n const generateSummary = (text) => {\n // Split into sentences\n const sentences = text.match(/[^.!?]+[.!?]+/g) || [];\n \n // Basic summary: take first 2 sentences or 20% of total sentences\n const summaryLength = Math.max(2, Math.ceil(sentences.length * 0.2));\n const summary = sentences.slice(0, summaryLength).join(' ');\n \n summaryOutput.textContent = summary || 'Not enough content for summary';\n };\n\n startBtn.addEventListener('click', startRecording);\n stopBtn.addEventListener('click', stopRecording);\n});\n\n---end---\n\nThis implementation features:\n\n1. A clean, modern UI with dark/light theme support\n2. Real-time speech-to-text conversion using the Web Speech API\n3. Basic text summarization (can be enhanced with more sophisticated algorithms)\n4. Responsive design that works on all devices\n5. Accessible controls and ARIA labels\n6. Smooth animations and transitions\n7. Professional gradient accents and modern typography\n8. Error handling and browser compatibility checks\n9. Local storage for theme preference\n10. SEO-optimized meta tags\n\nThe design is minimal yet sophisticated, with a focus on usability and visual appeal. The color scheme uses modern indigo/purple gradients that work well in both light and dark modes."

Changed around line 15

- "output_tokens": 1953

+ "output_tokens": 2708

script.js

Changed around line 1
-   const transcript = document.getElementById('transcript');
-   const summary = document.getElementById('summary');
- 
-   let recognition = null;
+   const transcriptionOutput = document.getElementById('transcription');
+   const summaryOutput = document.getElementById('summary');
+   const themeToggle = document.querySelector('.theme-toggle');
+   let recognition = null;
+   let isRecording = false;
+ 
+   // Theme handling
+   const toggleTheme = () => {
+     const isDark = document.body.getAttribute('data-theme') === 'dark';
+     document.body.setAttribute('data-theme', isDark ? 'light' : 'dark');
+     localStorage.setItem('theme', isDark ? 'light' : 'dark');
+   };
+ 
+   themeToggle.addEventListener('click', toggleTheme);
+ 
+   // Set initial theme
+   const savedTheme = localStorage.getItem('theme') || 'light';
+   document.body.setAttribute('data-theme', savedTheme);
+ 
+   // Speech recognition setup
-   } else {
-     startBtn.disabled = true;
-     transcript.innerHTML = 'Speech recognition is not supported in this browser.';
-   }
- 
-   function summarizeText(text) {
-     // Simple summarization algorithm (example)
-     const sentences = text.split(/[.!?]+/);
-     const significantSentences = sentences
-       .filter(sentence => sentence.length > 10)
-       .slice(0, 3);
-     return significantSentences.join('. ') + '.';
-   }
-   if (recognition) {
-           finalTranscript += transcript + ' ';
+           finalTranscript += transcript;
-         transcript.textContent = finalTranscript;
-         summary.textContent = summarizeText(finalTranscript);
+         transcriptionOutput.textContent = finalTranscript;
+         generateSummary(finalTranscript);
-     startBtn.addEventListener('click', () => {
-       transcript.textContent = '';
-       summary.textContent = '';
-       recognition.start();
-       startBtn.disabled = true;
-       stopBtn.disabled = false;
-     });
- 
-     stopBtn.addEventListener('click', () => {
-       recognition.stop();
-       startBtn.disabled = false;
-       stopBtn.disabled = true;
-     });
- 
-       startBtn.disabled = false;
-       stopBtn.disabled = true;
+       stopRecording();
+ 
+   // Recording controls
+   const startRecording = () => {
+     if (!recognition) {
+       alert('Speech recognition is not supported in your browser.');
+       return;
+     }
+ 
+     recognition.start();
+     isRecording = true;
+     startBtn.disabled = true;
+     stopBtn.disabled = false;
+     startBtn.style.opacity = '0.6';
+   };
+ 
+   const stopRecording = () => {
+     if (recognition) {
+       recognition.stop();
+     }
+     isRecording = false;
+     startBtn.disabled = false;
+     stopBtn.disabled = true;
+     startBtn.style.opacity = '1';
+   };
+ 
+   // Simple summarization function (basic implementation)
+   const generateSummary = (text) => {
+     // Split into sentences
+     const sentences = text.match(/[^.!?]+[.!?]+/g) || [];
+ 
+     // Basic summary: take first 2 sentences or 20% of total sentences
+     const summaryLength = Math.max(2, Math.ceil(sentences.length * 0.2));
+     const summary = sentences.slice(0, summaryLength).join(' ');
+ 
+     summaryOutput.textContent = summary || 'Not enough content for summary';
+   };
+ 
+   startBtn.addEventListener('click', startRecording);
+   stopBtn.addEventListener('click', stopRecording);

style.css

Changed around line 1
-   --primary-color: #4a90e2;
-   --secondary-color: #2c3e50;
-   --accent-color: #e74c3c;
-   --background: #f5f6fa;
-   --text-color: #2c3e50;
-   --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+   --primary-color: #6366f1;
+   --bg-color: #ffffff;
+   --text-color: #1f2937;
+   --border-color: #e5e7eb;
+   --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+   --gradient: linear-gradient(135deg, #6366f1, #8b5cf6);
+ }
+ 
+ [data-theme="dark"] {
+   --bg-color: #1f2937;
+   --text-color: #f3f4f6;
+   --border-color: #374151;
+   --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
Changed around line 21
-   font-family: 'Segoe UI', system-ui, sans-serif;
-   line-height: 1.6;
+   font-family: system-ui, -apple-system, sans-serif;
+   background: var(--bg-color);
-   background: var(--background);
+   line-height: 1.6;
+   transition: background-color 0.3s, color 0.3s;
-   background: white;
+   background: var(--bg-color);
+   position: sticky;
+   top: 0;
+   z-index: 100;
- h1 {
-   font-size: 2rem;
-   color: var(--secondary-color);
+ nav {
+   max-width: 1200px;
+   margin: 0 auto;
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
+ }
+ 
+ .logo {
+   font-size: 1.5rem;
+   font-weight: bold;
+   background: var(--gradient);
+   -webkit-background-clip: text;
+   -webkit-text-fill-color: transparent;
- h1 span {
-   color: var(--primary-color);
+ .theme-toggle {
+   background: none;
+   border: none;
+   cursor: pointer;
+   font-size: 1.2rem;
+ }
+ 
+ main {
+   max-width: 1200px;
+   margin: 0 auto;
+   padding: 2rem 1rem;
-   padding: 4rem 2rem;
-   background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-   color: white;
+   margin-bottom: 3rem;
- .hero h2 {
+ .hero h1 {
- }
- 
- .converter {
-   max-width: 1200px;
-   margin: 2rem auto;
-   padding: 0 1rem;
+   background: var(--gradient);
+   -webkit-background-clip: text;
+   -webkit-text-fill-color: transparent;
Changed around line 86: h1 span {
- .primary-btn, .secondary-btn {
-   padding: 1rem 2rem;
+ .primary-btn {
+   padding: 0.75rem 1.5rem;
-   border-radius: 50px;
+   border-radius: 0.5rem;
+   background: var(--gradient);
+   color: white;
-   font-size: 1rem;
-   transition: transform 0.2s;
- }
- 
- .primary-btn {
-   background: var(--primary-color);
-   color: white;
+   font-size: 1rem;
+   transition: transform 0.2s, opacity 0.2s;
- .secondary-btn {
-   background: var(--secondary-color);
-   color: white;
+ .primary-btn:disabled {
+   opacity: 0.6;
+   cursor: not-allowed;
- .primary-btn:hover, .secondary-btn:hover {
+ .primary-btn:not(:disabled):hover {
Changed around line 115: h1 span {
- .output-box {
-   background: white;
-   border-radius: 10px;
-   padding: 1rem;
+ .text-output {
-   box-shadow: var(--box-shadow);
- }
- 
- h3 {
-   margin-bottom: 1rem;
-   color: var(--secondary-color);
+   padding: 1rem;
+   border: 1px solid var(--border-color);
+   border-radius: 0.5rem;
+   background: var(--bg-color);
+   margin-top: 1rem;
-   background: white;
-   margin-top: 4rem;
+   background: var(--bg-color);
+   border-top: 1px solid var(--border-color);
+ }
+ 
+ footer nav {
+   display: flex;
+   justify-content: center;
+   gap: 2rem;
+   margin-top: 1rem;
+ }
+ 
+ footer a {
+   color: var(--text-color);
+   text-decoration: none;
Changed around line 148: footer {
-   .hero h2 {
+   .hero h1 {

root

21 days ago

Initial commit

body.html

Changed around line 1
+ 
+   
+     SpeakSum
+   
+ 
+ 
+ 
+   
+     Convert Speech to Text and Get Instant Summaries
+     Speak naturally and get both transcription and smart summaries in seconds
+   
+ 
+   
+     
+       
+         🎤
+         Start Speaking
+       
+       
+         ⏹️
+         Stop
+       
+     
+ 
+     
+       
+         Transcript
+         
+       
+ 
+       
+         Summary
+         
+       
+     
+   
+ 
+ 
+ 
+   Made with care by SpeakSum
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://speaksum.scroll.pub
+ metaTags
+ editButton /edit.html
+ title SpeakSum - Speech to Text & Summary
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "id": "msg_01BQzZ9qbe816kSHp4bKrvjE",
+   "type": "message",
+   "role": "assistant",
+   "model": "claude-3-5-sonnet-20241022",
+   "content": [
+     {
+       "type": "text",
+       "text": "Here's a complete website design for a speech-to-text conversion and summarization tool:\n\n---domain---\nspeaksum.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://speaksum.scroll.pub\nmetaTags\neditButton /edit.html\ntitle SpeakSum - Speech to Text & Summary\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n\n  \n    SpeakSum\n  \n\n\n\n  \n    Convert Speech to Text and Get Instant Summaries\n    Speak naturally and get both transcription and smart summaries in seconds
\n  \n\n  \n    \n      \n      \n    
\n\n    \n      \n        Transcript\n        
\n      
\n      \n      \n        Summary\n        
\n      
\n    
\n  \n\n\n\n  Made with care by SpeakSum
\n\n\n---style.css---\n:root {\n  --primary-color: #4a90e2;\n  --secondary-color: #2c3e50;\n  --accent-color: #e74c3c;\n  --background: #f5f6fa;\n  --text-color: #2c3e50;\n  --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nbody {\n  font-family: 'Segoe UI', system-ui, sans-serif;\n  line-height: 1.6;\n  color: var(--text-color);\n  background: var(--background);\n}\n\nheader {\n  background: white;\n  padding: 1rem;\n  box-shadow: var(--box-shadow);\n}\n\nh1 {\n  font-size: 2rem;\n  color: var(--secondary-color);\n}\n\nh1 span {\n  color: var(--primary-color);\n}\n\n.hero {\n  text-align: center;\n  padding: 4rem 2rem;\n  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n  color: white;\n}\n\n.hero h2 {\n  font-size: 2.5rem;\n  margin-bottom: 1rem;\n}\n\n.converter {\n  max-width: 1200px;\n  margin: 2rem auto;\n  padding: 0 1rem;\n}\n\n.controls {\n  display: flex;\n  gap: 1rem;\n  justify-content: center;\n  margin-bottom: 2rem;\n}\n\n.primary-btn, .secondary-btn {\n  padding: 1rem 2rem;\n  border: none;\n  border-radius: 50px;\n  cursor: pointer;\n  font-size: 1rem;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  transition: transform 0.2s;\n}\n\n.primary-btn {\n  background: var(--primary-color);\n  color: white;\n}\n\n.secondary-btn {\n  background: var(--secondary-color);\n  color: white;\n}\n\n.primary-btn:hover, .secondary-btn:hover {\n  transform: translateY(-2px);\n}\n\n.output-container {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 2rem;\n}\n\n.output-box {\n  background: white;\n  border-radius: 10px;\n  padding: 1rem;\n  min-height: 300px;\n  box-shadow: var(--box-shadow);\n}\n\nh3 {\n  margin-bottom: 1rem;\n  color: var(--secondary-color);\n}\n\nfooter {\n  text-align: center;\n  padding: 2rem;\n  background: white;\n  margin-top: 4rem;\n}\n\n@media (max-width: 768px) {\n  .output-container {\n    grid-template-columns: 1fr;\n  }\n  \n  .hero h2 {\n    font-size: 2rem;\n  }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n  const startBtn = document.getElementById('startBtn');\n  const stopBtn = document.getElementById('stopBtn');\n  const transcript = document.getElementById('transcript');\n  const summary = document.getElementById('summary');\n\n  let recognition = null;\n  \n  if ('webkitSpeechRecognition' in window) {\n    recognition = new webkitSpeechRecognition();\n    recognition.continuous = true;\n    recognition.interimResults = true;\n  } else {\n    startBtn.disabled = true;\n    transcript.innerHTML = 'Speech recognition is not supported in this browser.';\n  }\n\n  function summarizeText(text) {\n    // Simple summarization algorithm (example)\n    const sentences = text.split(/[.!?]+/);\n    const significantSentences = sentences\n      .filter(sentence => sentence.length > 10)\n      .slice(0, 3);\n    return significantSentences.join('. ') + '.';\n  }\n\n  if (recognition) {\n    recognition.onresult = (event) => {\n      let finalTranscript = '';\n      \n      for (let i = event.resultIndex; i < event.results.length; i++) {\n        const transcript = event.results[i][0].transcript;\n        if (event.results[i].isFinal) {\n          finalTranscript += transcript + ' ';\n        }\n      }\n\n      if (finalTranscript) {\n        transcript.textContent = finalTranscript;\n        summary.textContent = summarizeText(finalTranscript);\n      }\n    };\n\n    startBtn.addEventListener('click', () => {\n      transcript.textContent = '';\n      summary.textContent = '';\n      recognition.start();\n      startBtn.disabled = true;\n      stopBtn.disabled = false;\n    });\n\n    stopBtn.addEventListener('click', () => {\n      recognition.stop();\n      startBtn.disabled = false;\n      stopBtn.disabled = true;\n    });\n\n    recognition.onerror = (event) => {\n      console.error('Speech recognition error:', event.error);\n      startBtn.disabled = false;\n      stopBtn.disabled = true;\n    };\n  }\n});\n\n---end---\n\nThis implementation features:\n\n1. Clean, semantic HTML5 structure\n2. Beautiful gradient-based design with smooth animations\n3. Responsive layout that works well on mobile devices\n4. Real-time speech recognition using the Web Speech API\n5. Basic text summarization functionality\n6. Accessible controls and ARIA-compliant markup\n7. Modern CSS with variables and flexible layouts\n8. Error handling and browser compatibility checks\n9. Smooth transitions and hover effects\n10. Professional typography and spacing\n\nThe site uses a two-column layout for desktop that gracefully collapses to a single column on mobile devices. The color scheme is professional and modern, with careful attention to contrast and readability."
+     }
+   ],
+   "stop_reason": "end_turn",
+   "stop_sequence": null,
+   "usage": {
+     "input_tokens": 287,
+     "cache_creation_input_tokens": 0,
+     "cache_read_input_tokens": 0,
+     "output_tokens": 1953
+   }
+ }

readme.scroll

Changed around line 1

+ # speaksum1.scroll.pub

+ Website generated by Claude from prompt: I want to create a website for converting speech to text and summarizing the speech content

script.js

Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+   const startBtn = document.getElementById('startBtn');
+   const stopBtn = document.getElementById('stopBtn');
+   const transcript = document.getElementById('transcript');
+   const summary = document.getElementById('summary');
+ 
+   let recognition = null;
+ 
+   if ('webkitSpeechRecognition' in window) {
+     recognition = new webkitSpeechRecognition();
+     recognition.continuous = true;
+     recognition.interimResults = true;
+   } else {
+     startBtn.disabled = true;
+     transcript.innerHTML = 'Speech recognition is not supported in this browser.';
+   }
+ 
+   function summarizeText(text) {
+     // Simple summarization algorithm (example)
+     const sentences = text.split(/[.!?]+/);
+     const significantSentences = sentences
+       .filter(sentence => sentence.length > 10)
+       .slice(0, 3);
+     return significantSentences.join('. ') + '.';
+   }
+ 
+   if (recognition) {
+     recognition.onresult = (event) => {
+       let finalTranscript = '';
+ 
+       for (let i = event.resultIndex; i < event.results.length; i++) {
+         const transcript = event.results[i][0].transcript;
+         if (event.results[i].isFinal) {
+           finalTranscript += transcript + ' ';
+         }
+       }
+ 
+       if (finalTranscript) {
+         transcript.textContent = finalTranscript;
+         summary.textContent = summarizeText(finalTranscript);
+       }
+     };
+ 
+     startBtn.addEventListener('click', () => {
+       transcript.textContent = '';
+       summary.textContent = '';
+       recognition.start();
+       startBtn.disabled = true;
+       stopBtn.disabled = false;
+     });
+ 
+     stopBtn.addEventListener('click', () => {
+       recognition.stop();
+       startBtn.disabled = false;
+       stopBtn.disabled = true;
+     });
+ 
+     recognition.onerror = (event) => {
+       console.error('Speech recognition error:', event.error);
+       startBtn.disabled = false;
+       stopBtn.disabled = true;
+     };
+   }
+ });

style.css

Changed around line 1
+ :root {
+   --primary-color: #4a90e2;
+   --secondary-color: #2c3e50;
+   --accent-color: #e74c3c;
+   --background: #f5f6fa;
+   --text-color: #2c3e50;
+   --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ }
+ 
+ * {
+   margin: 0;
+   padding: 0;
+   box-sizing: border-box;
+ }
+ 
+ body {
+   font-family: 'Segoe UI', system-ui, sans-serif;
+   line-height: 1.6;
+   color: var(--text-color);
+   background: var(--background);
+ }
+ 
+ header {
+   background: white;
+   padding: 1rem;
+   box-shadow: var(--box-shadow);
+ }
+ 
+ h1 {
+   font-size: 2rem;
+   color: var(--secondary-color);
+ }
+ 
+ h1 span {
+   color: var(--primary-color);
+ }
+ 
+ .hero {
+   text-align: center;
+   padding: 4rem 2rem;
+   background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+   color: white;
+ }
+ 
+ .hero h2 {
+   font-size: 2.5rem;
+   margin-bottom: 1rem;
+ }
+ 
+ .converter {
+   max-width: 1200px;
+   margin: 2rem auto;
+   padding: 0 1rem;
+ }
+ 
+ .controls {
+   display: flex;
+   gap: 1rem;
+   justify-content: center;
+   margin-bottom: 2rem;
+ }
+ 
+ .primary-btn, .secondary-btn {
+   padding: 1rem 2rem;
+   border: none;
+   border-radius: 50px;
+   cursor: pointer;
+   font-size: 1rem;
+   display: flex;
+   align-items: center;
+   gap: 0.5rem;
+   transition: transform 0.2s;
+ }
+ 
+ .primary-btn {
+   background: var(--primary-color);
+   color: white;
+ }
+ 
+ .secondary-btn {
+   background: var(--secondary-color);
+   color: white;
+ }
+ 
+ .primary-btn:hover, .secondary-btn:hover {
+   transform: translateY(-2px);
+ }
+ 
+ .output-container {
+   display: grid;
+   grid-template-columns: 1fr 1fr;
+   gap: 2rem;
+ }
+ 
+ .output-box {
+   background: white;
+   border-radius: 10px;
+   padding: 1rem;
+   min-height: 300px;
+   box-shadow: var(--box-shadow);
+ }
+ 
+ h3 {
+   margin-bottom: 1rem;
+   color: var(--secondary-color);
+ }
+ 
+ footer {
+   text-align: center;
+   padding: 2rem;
+   background: white;
+   margin-top: 4rem;
+ }
+ 
+ @media (max-width: 768px) {
+   .output-container {
+     grid-template-columns: 1fr;
+   }
+ 
+   .hero h2 {
+     font-size: 2rem;
+   }
+ }

Changes to speaksum1.scroll.pub

SpeakSum

Convert Speech to Text and Get Instant Summaries

Transform Speech to Text & Get Instant Summaries

Transcript

Transcription

Summary

Summary

SpeakSum

Convert Speech to Text and Get Instant Summaries

Transcript

Summary

Convert Speech to Text and Get Instant Summaries

Transcript

Summary

Transform Speech to Text & Get Instant Summaries

Transcription

Summary

SpeakSum

Convert Speech to Text and Get Instant Summaries

Transcript

Summary

Convert Speech to Text and Get Instant Summaries

Transcript

Summary