Spaces:
Runtime error
Runtime error
| <html> | |
| <head> | |
| <title>Upload and Results</title> | |
| <!-- Include Google Fonts --> | |
| <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Roboto', sans-serif; | |
| background-color: #f4f4f4; | |
| overflow: auto; | |
| width: 100%; | |
| margin: 0; | |
| padding: 0; | |
| display: flex; | |
| flex-direction: column; /* Stack flex items vertically */ | |
| align-items: center; /* Center items horizontally */ | |
| justify-content: flex-start; /* Align items to the start of the container vertically */ | |
| min-height: 100vh; /* Use min-height instead of height to accommodate content taller than the viewport */ | |
| } | |
| table { | |
| width: 100%; /* Adjust the width as needed */ | |
| border-collapse: collapse; /* Collapse borders for a tighter look */ | |
| } | |
| th, td { | |
| border: 1px solid #ddd; /* Adjust the border size as needed */ | |
| text-align: left; | |
| padding: 5px; /* Reduce padding to decrease cell spacing */ | |
| height: 30px; /* Optionally reduce the height of the cells */ | |
| } | |
| .parent-element { | |
| overflow: visible; /* Ensures content is not cut off */ | |
| } | |
| .container { | |
| background-color: white; | |
| overflow: auto; | |
| border-radius: 8px; | |
| box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); | |
| padding: 40px; | |
| width: 100%; /* Set width to 100% of the viewport */ | |
| max-width: 700px; | |
| } | |
| .score-bar-container { | |
| position: relative; | |
| margin-top: 20px; /* Space above the score bar */ | |
| max-width: 100%; /* Ensures the container does not exceed the parent width */ | |
| } | |
| .score-very-good-fill { | |
| background-color: #4CAF50; /* Green */ | |
| } | |
| .score-good-fill { | |
| background-color: #FFEB3B; /* Yellow */ | |
| } | |
| .score-ok-fill { | |
| background-color: #FF9800; /* Orange */ | |
| } | |
| .score-bad-fill { | |
| background-color: #f44336; /* Red */ | |
| } | |
| .score-very-bad-fill { | |
| background-color: #9E9E9E; /* Grey */ | |
| } | |
| .score-very-good-text { | |
| color: #4CAF50; /* Green */ | |
| } | |
| .score-good-text { | |
| color: #FFEB3B; /* Yellow */ | |
| } | |
| .score-ok-text { | |
| color: #FF9800; /* Orange */ | |
| } | |
| .score-bad-text { | |
| color: #f44336; /* Red */ | |
| } | |
| .score-very-bad-text { | |
| color: #9E9E9E; /* Grey */ | |
| } | |
| .score-bar { | |
| background-color: #ddd; | |
| border-radius: 10px; | |
| height: 20px; | |
| width: 100%; /* Adjusted to take the full width */ | |
| display: inline-block; /* Allows the score text to sit next to the score bar */ | |
| vertical-align: middle; /* Aligns score bar and text vertically */ | |
| } | |
| .score-fill { | |
| height: 100%; | |
| border-radius: 10px 0 0 10px; /* Rounded corners on the left side */ | |
| display: inline-block; | |
| vertical-align: middle; | |
| } | |
| .score-text { | |
| display: inline-block; | |
| vertical-align: middle; /* Align with the score bar */ | |
| font-weight: bold; /* Make the score text bold */ | |
| margin-left: 10px; /* Space between the score bar and score text */ | |
| } | |
| .score-title { | |
| font-size: 20px; | |
| font-weight: bold; | |
| margin: 20px 0; | |
| color: #333; | |
| } | |
| .major-issues { | |
| text-align: left; /* Aligns the major issues to the left */ | |
| padding-left: 20px; /* Padding for the bullet list */ | |
| list-style: inside disc; /* Bullet style */ | |
| } | |
| form { | |
| margin-bottom: 20px; | |
| } | |
| input[type="file"] { | |
| margin-bottom: 10px; | |
| } | |
| input[type="submit"] { | |
| cursor: pointer; | |
| margin-top: 10px; | |
| padding: 10px 20px; | |
| border: none; | |
| background-color: #4CAF50; | |
| color: white; | |
| border-radius: 5px; | |
| font-size: 16px; | |
| font-weight: bold; | |
| } | |
| input[type="submit"]:hover { | |
| background-color: #45a049; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h2>Upload PDF and View Results</h2> | |
| <!-- Upload Form --> | |
| <form method="post" enctype="multipart/form-data"> | |
| <input type="file" name="file" required> | |
| <input type="submit" value="Upload"> | |
| </form> | |
| <!-- Results Section --> | |
| {% if total_score is not none %} | |
| <!-- GPT-4 Score Bar --> | |
| <div class="score-title">Score for GPT-4:</div> | |
| <div class="score-bar-container"> | |
| <div class="score-bar"> | |
| <div class="score-fill {{ | |
| 'score-very-good-fill' if criteria_met == 9 else | |
| 'score-good-fill' if criteria_met >= 7 else | |
| 'score-ok-fill' if criteria_met >= 5 else | |
| 'score-bad-fill' if criteria_met >= 3 else | |
| 'score-very-bad-fill' }}" style="width: {{ score_percentage_gpt4 }}%;"></div> | |
| </div> | |
| <div class="score-text">{{ total_score }}/9</div> | |
| </div> | |
| <!-- Reasoning for GPT-4 --> | |
| <h3>Reasoning:</h3> | |
| <ul class="major-issues"> | |
| {% for issue in reasoning %} | |
| <li>{{ issue }}</li> | |
| {% endfor %} | |
| </ul> | |
| <h3>Contact Details:</h3> | |
| <p> {{result}}</p> | |
| {% endif %} | |
| </div> | |
| </body> | |
| </html> | |