Spaces:
Running
Running
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AIservices</title> | |
| <link rel="stylesheet" href="/static/appS.css"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> | |
| </head> | |
| <body> | |
| <header class="intro"> | |
| <div class="return"> | |
| <i class="fa-solid fa-arrow-left"style="cursor:pointer;"></i> | |
| </div> | |
| <img src="/resources/aiRobot1.png" alt="AI Assistant Aidan"> | |
| <span>Hi there, it's <em> Aidan </em> again, give me a document /image and I’ll Summarize/ Caption it</span> | |
| </header> | |
| <div class="explainChoix fade-in"> | |
| <span>Choose a mode to either summarize a document (PDF, DOCX, PPTX, XLSX) or caption an image</span> | |
| <button>Got it</button> | |
| </div> | |
| <ul class="select-options"> | |
| <li><label><input type="radio" id="summarize-radio" name="mode" value="Summarize" checked> Summarize</label></li> <!-- ✅ Added ID and checked --> | |
| <li><label><input type="radio" name="mode" value="Captioning"> Captioning</label></li> | |
| </ul> | |
| <div class="convo"></div> | |
| <div class="qtdoc"> | |
| <div class="CaptionInput innactive"> | |
| <div class="selectImg"> | |
| <p>Select an image :</p> | |
| </div> | |
| <div class="captionButtons"> | |
| <i class="fa-solid fa-image" id="image-btn" title="Upload image"></i> | |
| <button class="sendingQA">Send</button> | |
| </div> | |
| </div> | |
| <div class="SummarizeInput active"> | |
| <div class="LengthS"> | |
| <p>Summary length:</p> | |
| <ul class="select-optionsS"> | |
| <li><label><input type="radio" name="length" value="Short"> Short</label></li> <!-- ✅ Corrected spelling --> | |
| <li><label><input type="radio" name="length" value="Medium" checked> Medium</label></li> | |
| <li><label><input type="radio" name="length" value="Long"> Long</label></li> | |
| </ul> | |
| </div> | |
| <div class="SummuririzeButtons"> | |
| <i class="fa-solid fa-file" id="file-btn" title="Upload file"></i> | |
| <button class="sendingQA">Send</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ✅ Corrected accept file types --> | |
| <input type="file" id="file-upload" accept=".pdf,.docx,.pptx,.xlsx" style="display:none"> | |
| <input type="file" id="image-upload" accept="image/*" style="display:none"> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const fadeElements = document.querySelectorAll('.fade-in'); | |
| const isInViewport = (el) => { | |
| const rect = el.getBoundingClientRect(); | |
| return rect.top <= (window.innerHeight || document.documentElement.clientHeight); | |
| }; | |
| const runAnimations = () => { | |
| fadeElements.forEach(el => { | |
| if (isInViewport(el)) { | |
| el.classList.add('active'); | |
| } | |
| }); | |
| }; | |
| runAnimations(); | |
| window.addEventListener('scroll', runAnimations); | |
| }); | |
| </script> | |
| <script src="/static/appS.js"></script> | |
| </body> | |
| </html> | |