Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Document & Image Analysis</title> | |
| <link rel="stylesheet" href="css/styles.css"> | |
| <link rel="stylesheet" href="css/animations.css"> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| </head> | |
| <body> | |
| <header class="header"> | |
| <div class="container"> | |
| <div class="logo"> | |
| <i class="fas fa-brain"></i> | |
| <h1>AI Document Analyzer</h1> | |
| </div> | |
| <nav class="nav"> | |
| <ul> | |
| <li><a href="#" class="active">Home</a></li> | |
| <li><a href="#features">Features</a></li> | |
| <li><a href="#about">About</a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| </header> | |
| <main> | |
| <section class="hero"> | |
| <div class="container"> | |
| <div class="hero-content"> | |
| <h1 class="hero-title">Powerful AI Document & Image Analysis</h1> | |
| <p class="hero-subtitle">Upload documents and images for instant AI-powered analysis, summarization, and interpretation.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="upload-section"> | |
| <div class="container"> | |
| <div class="tabs"> | |
| <button class="tab-btn active" data-tab="document">Document Analysis</button> | |
| <button class="tab-btn" data-tab="image">Image Analysis</button> | |
| </div> | |
| <div class="tab-content active" id="document-tab"> | |
| <div class="upload-container" id="document-upload"> | |
| <div class="upload-area" id="document-drop-area"> | |
| <i class="fas fa-file-alt"></i> | |
| <h3>Upload Document</h3> | |
| <p>Drag & drop your document here or click to browse</p> | |
| <p class="file-types">Supported formats: PDF, DOCX, PPTX, Excel</p> | |
| <input type="file" id="document-file-input" accept=".pdf,.docx,.pptx,.xlsx,.xls" hidden> | |
| </div> | |
| <div class="analysis-options"> | |
| <h3>Analysis Options</h3> | |
| <div class="radio-group"> | |
| <div class="radio-option"> | |
| <input type="radio" id="doc-summarize" name="document-analysis" value="summarize" checked> | |
| <label for="doc-summarize">Summarize Document</label> | |
| </div> | |
| </div> | |
| <button class="analyze-btn" id="analyze-document-btn" disabled>Analyze Document</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="tab-content" id="image-tab"> | |
| <div class="upload-container" id="image-upload"> | |
| <div class="upload-area" id="image-drop-area"> | |
| <i class="fas fa-image"></i> | |
| <h3>Upload Image</h3> | |
| <p>Drag & drop your image here or click to browse</p> | |
| <p class="file-types">Supported formats: JPG, JPEG, PNG</p> | |
| <input type="file" id="image-file-input" accept=".jpg,.jpeg,.png" hidden> | |
| </div> | |
| <div class="analysis-options"> | |
| <h3>Analysis Options</h3> | |
| <div class="radio-group"> | |
| <div class="radio-option"> | |
| <input type="radio" id="img-caption" name="image-analysis" value="caption" checked> | |
| <label for="img-caption">Generate Caption</label> | |
| </div> | |
| </div> | |
| <button class="analyze-btn" id="analyze-image-btn" disabled>Analyze Image</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="results-container" id="results-container" style="display: none;"> | |
| <div class="results-header"> | |
| <h2>Analysis Results</h2> | |
| <div class="results-actions"> | |
| <button id="copy-results" class="action-btn"><i class="fas fa-copy"></i> Copy</button> | |
| <button id="close-results" class="action-btn"><i class="fas fa-times"></i> Close</button> | |
| </div> | |
| </div> | |
| <div class="results-content" id="results-content"> | |
| <!-- Results will be displayed here --> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="features" id="features"> | |
| <div class="container"> | |
| <h2 class="section-title">Features</h2> | |
| <div class="features-grid"> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-file-alt"></i> | |
| </div> | |
| <h3>Document Summarization</h3> | |
| <p>Extract key information from documents and get concise summaries.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-image"></i> | |
| </div> | |
| <h3>Image Captioning</h3> | |
| <p>Generate descriptive captions for images using AI vision models.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-bolt"></i> | |
| </div> | |
| <h3>Fast Processing</h3> | |
| <p>Powered by state-of-the-art Hugging Face AI models for quick results.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-lock"></i> | |
| </div> | |
| <h3>Secure Analysis</h3> | |
| <p>Your files are processed securely and not stored permanently.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="about" id="about"> | |
| <div class="container"> | |
| <h2 class="section-title">About</h2> | |
| <div class="about-content"> | |
| <p>This AI Document Analyzer uses state-of-the-art models from Hugging Face to provide accurate document summarization and image captioning. Built with Python FastAPI and deployed on Hugging Face Spaces, this tool demonstrates the power of AI in document and image analysis.</p> | |
| <p>The application leverages powerful language and vision models to extract meaning from your documents and images, providing valuable insights and saving you time.</p> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="footer"> | |
| <div class="container"> | |
| <p>© 2025 AI Document Analyzer. Built with <i class="fas fa-heart"></i> and Hugging Face AI.</p> | |
| </div> | |
| </footer> | |
| <div class="loading-overlay" id="loading-overlay"> | |
| <div class="spinner"></div> | |
| <p>Processing your file...</p> | |
| </div> | |
| <script src="js/main.js"></script> | |
| <script src="js/upload.js"></script> | |
| <script src="js/results.js"></script> | |
| </body> | |
| </html> |