Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>File Analysis</title> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet"> | |
| <style> | |
| body { | |
| background-color: #f8f9fa; | |
| font-family: 'Arial', sans-serif; | |
| } | |
| .container { | |
| margin-top: 50px; | |
| margin-bottom: 50px; | |
| border-radius: 10px; | |
| background: white; | |
| padding: 30px; | |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); | |
| } | |
| h2, h3 { | |
| color: #343a40; | |
| margin-bottom: 20px; | |
| } | |
| .form-control, .form-select { | |
| margin-bottom: 15px; | |
| border-radius: 8px; | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | |
| } | |
| .form-control:focus, .form-select:focus { | |
| border-color: #007bff; | |
| box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); | |
| } | |
| .btn { | |
| border-radius: 8px; | |
| transition: background-color 0.3s ease, transform 0.2s ease; | |
| } | |
| .btn-primary { | |
| background-color: #0d6efd; | |
| border: none; | |
| } | |
| .btn-primary:hover { | |
| background-color: #0b5ed7; | |
| transform: translateY(-2px); | |
| } | |
| .btn-secondary { | |
| background-color: #6c757d; | |
| border: none; | |
| } | |
| .btn-secondary:hover { | |
| background-color: #5a6268; | |
| transform: translateY(-2px); | |
| } | |
| .summary { | |
| background-color: #ffffff; | |
| padding: 20px; | |
| border-radius: 8px; | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | |
| margin-top: 20px; | |
| } | |
| .list-group-item { | |
| background-color: #ffffff; | |
| border: 1px solid #dee2e6; | |
| border-radius: 8px; | |
| margin-bottom: 10px; | |
| } | |
| .list-group-item:hover { | |
| background-color: #f1f1f1; | |
| } | |
| .conversation-history { | |
| margin-top: 20px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h2 class="text-center">File Analysis</h2> | |
| {% if not summary %} | |
| <form action="/" method="post" enctype="multipart/form-data" class="bg-light p-4 border rounded shadow-sm"> | |
| <h5>Upload File</h5> | |
| <input type="file" name="file" accept=".pdf,.pptx,.csv,.xlsx,.mp3,.docx" class="form-control"> | |
| <label>Select Summary Length:</label> | |
| <select name="summary_length" class="form-select"> | |
| <option value="2 sentences">Short</option> | |
| <option value="5 sentences">Medium</option> | |
| <option value="10 sentences">Long</option> | |
| </select> | |
| <br> | |
| <label>Who are you?</label> | |
| <input type="text" name="iam" id="iam" class="form-control" required> | |
| <label>What's the document context about?</label> | |
| <input type="text" name="context" id="context" class="form-control" required> | |
| <label>Output Expectation (What you want to analyze?)</label> | |
| <input type="text" name="output" id="output" class="form-control" required> | |
| <label>Input your Google Gemini API Key</label> | |
| <input type="text" name="api_key" id="api_key" class="form-control"> | |
| <input type="submit" value="Analyze" class="btn btn-primary mt-3"> | |
| </form> | |
| {% endif %} | |
| {% if summary %} | |
| <div class="summary"> | |
| <h3>Summary:</h3> | |
| <p>{{ summary|safe }}</p> | |
| {% if show_conversation %} | |
| <h3>Conversation</h3> | |
| <form action="/ask" method="post" class="mb-3"> | |
| <input type="text" name="question" class="form-control" placeholder="Ask your question"> | |
| <input type="submit" value="Ask" class="btn btn-secondary mt-2"> | |
| </form> | |
| {% endif %} | |
| </div> | |
| {% endif %} | |
| {% if question_responses %} | |
| <br> | |
| <h3>Conversation History:</h3> | |
| <ul class="list-group conversation-history"> | |
| {% for question, response in question_responses %} | |
| <li class="list-group-item"> | |
| <strong>Question:</strong> {{ question }}<br> | |
| <strong>Response:</strong> {{ response|safe }} | |
| </li> | |
| {% endfor %} | |
| </ul> | |
| {% endif %} | |
| </div> | |
| <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script> | |
| <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.min.js"></script> | |
| </body> | |
| </html> | |