Changes to enhance-mri3.scroll.pub

root

8 days ago

Initial commit

body.html

Changed around line 1
+ 
+   
+     MRI Enhancement Lab
+   
+ 
+ 
+ 
+   
+     Enhance Your MRI Images
+     Advanced AI-powered image quality enhancement for medical imaging
+   
+ 
+   
+     
+       
+         
+         Drop your NII file here
+         or
+         Choose File
+         
+       
+     
+ 
+     
+       Select Enhancement Model
+       
+         
+           Super Resolution
+           2x resolution enhancement
+         
+         
+           Denoising
+           Reduce image noise
+         
+         
+           Contrast Enhancement
+           Improve tissue contrast
+         
+       
+     
+ 
+     
+       
+         
+           Original
+           
+         
+         
+           Enhanced
+           
+         
+       
+     
+   
+ 
+ 
+ 
+   Created by the MRI Enhancement Lab Team
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://enhance-mri.scroll.pub
+ metaTags
+  description "Advanced MRI Image Enhancement Tool - Upload and enhance your medical imaging with AI"
+  keywords "MRI enhancement, medical imaging AI, image quality improvement, neuroimaging"
+ editButton /edit.html
+ title MRI Enhancement Lab
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "id": "msg_01VLH4Dt41ALzoKjkFipiQo4",
+   "type": "message",
+   "role": "assistant",
+   "model": "claude-3-5-sonnet-20241022",
+   "content": [
+     {
+       "type": "text",
+       "text": "I'll create a modern, interactive web app for MRI image enhancement. For the domain, I suggest:\n\n---domain---\nenhance-mri.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://enhance-mri.scroll.pub\nmetaTags\n description \"Advanced MRI Image Enhancement Tool - Upload and enhance your medical imaging with AI\"\n keywords \"MRI enhancement, medical imaging AI, image quality improvement, neuroimaging\"\neditButton /edit.html\ntitle MRI Enhancement Lab\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n\n  \n    MRI Enhancement Lab\n  \n\n\n\n  \n    Enhance Your MRI Images\n    Advanced AI-powered image quality enhancement for medical imaging
\n  \n\n  \n    \n      \n        \n        Drop your NII file here\n        or
\n        Choose File\n        \n      
\n    
\n\n    \n      Select Enhancement Model\n      \n        \n          Super Resolution\n          2x resolution enhancement
\n        
\n        \n          Denoising\n          Reduce image noise
\n        
\n        \n          Contrast Enhancement\n          Improve tissue contrast
\n        
\n      
\n    
\n\n    \n      \n        \n          Original\n          
\n        
\n        \n          Enhanced\n          
\n        
\n      
\n    
\n  \n\n\n\n  Created by the MRI Enhancement Lab Team
\n\n\n---style.css---\n:root {\n  --primary: #6c63ff;\n  --secondary: #4CAF50;\n  --accent: #ff6b6b;\n  --background: #f8f9fa;\n  --text: #2d3436;\n}\n\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nbody {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n  line-height: 1.6;\n  color: var(--text);\n  background: var(--background);\n}\n\nheader {\n  background: linear-gradient(135deg, var(--primary), #8b80ff);\n  padding: 1rem;\n  box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n}\n\nheader h1 {\n  color: white;\n  font-size: 1.8rem;\n  text-align: center;\n}\n\n.hero {\n  text-align: center;\n  padding: 3rem 1rem;\n  background: linear-gradient(rgba(108, 99, 255, 0.05), rgba(108, 99, 255, 0.1));\n}\n\n.hero h2 {\n  font-size: 2.5rem;\n  margin-bottom: 1rem;\n  background: linear-gradient(135deg, var(--primary), var(--accent));\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n\n.upload-section {\n  max-width: 1200px;\n  margin: 2rem auto;\n  padding: 0 1rem;\n}\n\n.upload-container {\n  margin-bottom: 2rem;\n}\n\n.upload-box {\n  border: 3px dashed var(--primary);\n  border-radius: 20px;\n  padding: 2rem;\n  text-align: center;\n  background: white;\n  transition: all 0.3s ease;\n  cursor: pointer;\n}\n\n.upload-box:hover {\n  transform: translateY(-5px);\n  box-shadow: 0 10px 20px rgba(108, 99, 255, 0.1);\n}\n\n.upload-button {\n  display: inline-block;\n  background: var(--primary);\n  color: white;\n  padding: 0.8rem 1.5rem;\n  border-radius: 25px;\n  cursor: pointer;\n  transition: all 0.3s ease;\n}\n\n.upload-button:hover {\n  background: #5549ff;\n  transform: scale(1.05);\n}\n\n.model-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: 1.5rem;\n  margin-top: 1.5rem;\n}\n\n.model-card {\n  background: white;\n  padding: 1.5rem;\n  border-radius: 15px;\n  box-shadow: 0 5px 15px rgba(0,0,0,0.05);\n  cursor: pointer;\n  transition: all 0.3s ease;\n}\n\n.model-card:hover {\n  transform: translateY(-5px);\n  box-shadow: 0 10px 20px rgba(108, 99, 255, 0.1);\n}\n\n.model-card.selected {\n  border: 2px solid var(--primary);\n}\n\n.preview-section {\n  margin-top: 2rem;\n}\n\n.preview-container {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 2rem;\n  padding: 1rem;\n}\n\n.preview-image {\n  background: white;\n  border-radius: 10px;\n  height: 300px;\n  box-shadow: 0 5px 15px rgba(0,0,0,0.05);\n}\n\nfooter {\n  text-align: center;\n  padding: 2rem;\n  background: white;\n  margin-top: 3rem;\n}\n\n@media (max-width: 768px) {\n  .preview-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 dropZone = document.getElementById('dropZone');\n  const fileInput = document.getElementById('fileInput');\n  const modelCards = document.querySelectorAll('.model-card');\n  const previewSection = document.querySelector('.preview-section');\n\n  // Drag and drop handlers\n  dropZone.addEventListener('dragover', (e) => {\n    e.preventDefault();\n    dropZone.style.backgroundColor = '#f0f0ff';\n  });\n\n  dropZone.addEventListener('dragleave', (e) => {\n    e.preventDefault();\n    dropZone.style.backgroundColor = 'white';\n  });\n\n  dropZone.addEventListener('drop', (e) => {\n    e.preventDefault();\n    dropZone.style.backgroundColor = 'white';\n    const files = e.dataTransfer.files;\n    handleFiles(files);\n  });\n\n  dropZone.addEventListener('click', () => {\n    fileInput.click();\n  });\n\n  fileInput.addEventListener('change', (e) => {\n    handleFiles(e.target.files);\n  });\n\n  // Model selection\n  modelCards.forEach(card => {\n    card.addEventListener('click', () => {\n      modelCards.forEach(c => c.classList.remove('selected'));\n      card.classList.add('selected');\n      if (fileInput.files.length > 0) {\n        previewSection.hidden = false;\n      }\n    });\n  });\n\n  function handleFiles(files) {\n    if (files.length === 0) return;\n    \n    const file = files[0];\n    if (!file.name.endsWith('.nii') && !file.name.endsWith('.nii.gz')) {\n      alert('Please upload a valid NIfTI file (.nii or .nii.gz)');\n      return;\n    }\n\n    // Show preview section if model is selected\n    if (document.querySelector('.model-card.selected')) {\n      previewSection.hidden = false;\n    }\n\n    // Simulate processing\n    const loadingMessage = document.createElement('div');\n    loadingMessage.textContent = 'Processing...';\n    loadingMessage.style.color = var(--primary);\n    dropZone.appendChild(loadingMessage);\n\n    setTimeout(() => {\n      loadingMessage.remove();\n      alert('File processed successfully! (Demo purposes only)');\n    }, 2000);\n  }\n});\n\n---end---\n\nThis web app features:\n1. Modern gradient-based design with smooth animations\n2. Drag-and-drop file upload with visual feedback\n3. Interactive model selection cards\n4. Before/after preview section\n5. Fully responsive layout\n6. Accessible semantic HTML\n7. Beautiful color scheme and typography\n8. Smooth hover effects and transitions\n9. Error handling for file types\n10. Loading state simulation\n\nThe design is clean, professional, and engaging while maintaining simplicity and usability. The color scheme is modern and appealing, with a focus on the primary purple/blue gradient that gives it a high-tech medical feel."
+     }
+   ],
+   "stop_reason": "end_turn",
+   "stop_sequence": null,
+   "usage": {
+     "input_tokens": 318,
+     "cache_creation_input_tokens": 0,
+     "cache_read_input_tokens": 0,
+     "output_tokens": 2639
+   }
+ }

readme.scroll

Changed around line 1

+ # enhance-mri3.scroll.pub

+ website generated by Claude from prompt: I want to create a webapp demo for mr image quality enhancement for my pitchdeck. I want to be able to upload nii image and select what model to use. Make it modern and pretty (colorful). Be creative.

script.js

Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+   const dropZone = document.getElementById('dropZone');
+   const fileInput = document.getElementById('fileInput');
+   const modelCards = document.querySelectorAll('.model-card');
+   const previewSection = document.querySelector('.preview-section');
+ 
+   // Drag and drop handlers
+   dropZone.addEventListener('dragover', (e) => {
+     e.preventDefault();
+     dropZone.style.backgroundColor = '#f0f0ff';
+   });
+ 
+   dropZone.addEventListener('dragleave', (e) => {
+     e.preventDefault();
+     dropZone.style.backgroundColor = 'white';
+   });
+ 
+   dropZone.addEventListener('drop', (e) => {
+     e.preventDefault();
+     dropZone.style.backgroundColor = 'white';
+     const files = e.dataTransfer.files;
+     handleFiles(files);
+   });
+ 
+   dropZone.addEventListener('click', () => {
+     fileInput.click();
+   });
+ 
+   fileInput.addEventListener('change', (e) => {
+     handleFiles(e.target.files);
+   });
+ 
+   // Model selection
+   modelCards.forEach(card => {
+     card.addEventListener('click', () => {
+       modelCards.forEach(c => c.classList.remove('selected'));
+       card.classList.add('selected');
+       if (fileInput.files.length > 0) {
+         previewSection.hidden = false;
+       }
+     });
+   });
+ 
+   function handleFiles(files) {
+     if (files.length === 0) return;
+ 
+     const file = files[0];
+     if (!file.name.endsWith('.nii') && !file.name.endsWith('.nii.gz')) {
+       alert('Please upload a valid NIfTI file (.nii or .nii.gz)');
+       return;
+     }
+ 
+     // Show preview section if model is selected
+     if (document.querySelector('.model-card.selected')) {
+       previewSection.hidden = false;
+     }
+ 
+     // Simulate processing
+     const loadingMessage = document.createElement('div');
+     loadingMessage.textContent = 'Processing...';
+     loadingMessage.style.color = var(--primary);
+     dropZone.appendChild(loadingMessage);
+ 
+     setTimeout(() => {
+       loadingMessage.remove();
+       alert('File processed successfully! (Demo purposes only)');
+     }, 2000);
+   }
+ });

style.css

Changed around line 1
+ :root {
+   --primary: #6c63ff;
+   --secondary: #4CAF50;
+   --accent: #ff6b6b;
+   --background: #f8f9fa;
+   --text: #2d3436;
+ }
+ 
+ * {
+   margin: 0;
+   padding: 0;
+   box-sizing: border-box;
+ }
+ 
+ body {
+   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+   line-height: 1.6;
+   color: var(--text);
+   background: var(--background);
+ }
+ 
+ header {
+   background: linear-gradient(135deg, var(--primary), #8b80ff);
+   padding: 1rem;
+   box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+ }
+ 
+ header h1 {
+   color: white;
+   font-size: 1.8rem;
+   text-align: center;
+ }
+ 
+ .hero {
+   text-align: center;
+   padding: 3rem 1rem;
+   background: linear-gradient(rgba(108, 99, 255, 0.05), rgba(108, 99, 255, 0.1));
+ }
+ 
+ .hero h2 {
+   font-size: 2.5rem;
+   margin-bottom: 1rem;
+   background: linear-gradient(135deg, var(--primary), var(--accent));
+   -webkit-background-clip: text;
+   -webkit-text-fill-color: transparent;
+ }
+ 
+ .upload-section {
+   max-width: 1200px;
+   margin: 2rem auto;
+   padding: 0 1rem;
+ }
+ 
+ .upload-container {
+   margin-bottom: 2rem;
+ }
+ 
+ .upload-box {
+   border: 3px dashed var(--primary);
+   border-radius: 20px;
+   padding: 2rem;
+   text-align: center;
+   background: white;
+   transition: all 0.3s ease;
+   cursor: pointer;
+ }
+ 
+ .upload-box:hover {
+   transform: translateY(-5px);
+   box-shadow: 0 10px 20px rgba(108, 99, 255, 0.1);
+ }
+ 
+ .upload-button {
+   display: inline-block;
+   background: var(--primary);
+   color: white;
+   padding: 0.8rem 1.5rem;
+   border-radius: 25px;
+   cursor: pointer;
+   transition: all 0.3s ease;
+ }
+ 
+ .upload-button:hover {
+   background: #5549ff;
+   transform: scale(1.05);
+ }
+ 
+ .model-grid {
+   display: grid;
+   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+   gap: 1.5rem;
+   margin-top: 1.5rem;
+ }
+ 
+ .model-card {
+   background: white;
+   padding: 1.5rem;
+   border-radius: 15px;
+   box-shadow: 0 5px 15px rgba(0,0,0,0.05);
+   cursor: pointer;
+   transition: all 0.3s ease;
+ }
+ 
+ .model-card:hover {
+   transform: translateY(-5px);
+   box-shadow: 0 10px 20px rgba(108, 99, 255, 0.1);
+ }
+ 
+ .model-card.selected {
+   border: 2px solid var(--primary);
+ }
+ 
+ .preview-section {
+   margin-top: 2rem;
+ }
+ 
+ .preview-container {
+   display: grid;
+   grid-template-columns: 1fr 1fr;
+   gap: 2rem;
+   padding: 1rem;
+ }
+ 
+ .preview-image {
+   background: white;
+   border-radius: 10px;
+   height: 300px;
+   box-shadow: 0 5px 15px rgba(0,0,0,0.05);
+ }
+ 
+ footer {
+   text-align: center;
+   padding: 2rem;
+   background: white;
+   margin-top: 3rem;
+ }
+ 
+ @media (max-width: 768px) {
+   .preview-container {
+     grid-template-columns: 1fr;
+   }
+ 
+   .hero h2 {
+     font-size: 2rem;
+   }
+ }