Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Web Application</title> | |
| <link rel="stylesheet" href="test.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <h1>AI Web Application</h1> | |
| <p>Powered by FastAPI and Hugging Face</p> | |
| </header> | |
| <div class="tabs"> | |
| <button class="tab-btn active" data-tab="summarize">Summarize</button> | |
| <button class="tab-btn" data-tab="ask">Ask Questions</button> | |
| <button class="tab-btn" data-tab="caption">Image Captioning</button> | |
| <button class="tab-btn" data-tab="translate">Translation</button> | |
| </div> | |
| <div class="tab-content active" id="summarize"> | |
| <h2>Document Summarization</h2> | |
| <div class="upload-area" id="summarize-upload"> | |
| <input type="file" id="summarize-file" accept=".pdf,.docx,.pptx,.xlsx,.txt"> | |
| <label for="summarize-file">Choose a document (PDF, DOCX, PPTX, XLSX)</label> | |
| <button id="summarize-btn">Summarize</button> | |
| </div> | |
| <div class="result-area" id="summarize-result"></div> | |
| </div> | |
| <div class="tab-content" id="ask"> | |
| <h2>Question Answering</h2> | |
| <div class="upload-area" id="ask-upload"> | |
| <input type="file" id="ask-file" accept=".pdf,.docx,.pptx,.xlsx,.txt,.jpg,.jpeg,.png"> | |
| <label for="ask-file">Choose a document or image</label> | |
| <textarea id="ask-question" placeholder="Enter your question here..."></textarea> | |
| <button id="ask-btn">Ask Question</button> | |
| </div> | |
| <div class="result-area" id="ask-result"></div> | |
| </div> | |
| <div class="tab-content" id="caption"> | |
| <h2>Image Captioning</h2> | |
| <div class="upload-area" id="caption-upload"> | |
| <input type="file" id="caption-file" accept=".jpg,.jpeg,.png"> | |
| <label for="caption-file">Choose an image</label> | |
| <button id="caption-btn">Generate Caption</button> | |
| </div> | |
| <div class="result-area" id="caption-result"></div> | |
| </div> | |
| <div class="tab-content" id="translate"> | |
| <h2>Text Translation</h2> | |
| <div class="upload-area" id="translate-upload"> | |
| <textarea id="translate-text" placeholder="Enter text to translate..."></textarea> | |
| <div class="language-select"> | |
| <select id="source-lang"> | |
| <option value="eng_Latn">English</option> | |
| <option value="fra_Latn">French</option> | |
| <option value="spa_Latn">Spanish</option> | |
| <option value="deu_Latn">German</option> | |
| <option value="arb_Arab">Arabic</option> | |
| </select> | |
| <span>→</span> | |
| <select id="target-lang"> | |
| <option value="fra_Latn">French</option> | |
| <option value="eng_Latn">English</option> | |
| <option value="spa_Latn">Spanish</option> | |
| <option value="deu_Latn">German</option> | |
| <option value="arb_Arab">Arabic</option> | |
| </select> | |
| </div> | |
| <button id="translate-btn">Translate</button> | |
| </div> | |
| <div class="result-area" id="translate-result"></div> | |
| </div> | |
| </div> | |
| <script src="test.js"></script> | |
| </body> | |
| </html> |