Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Product Health Check</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| } | |
| h1 { | |
| text-align: center; | |
| margin-bottom: 30px; | |
| } | |
| .form-container { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| margin-bottom: 30px; | |
| } | |
| .input-row { | |
| display: flex; | |
| width: 100%; | |
| max-width: 600px; | |
| margin-top: 10px; | |
| } | |
| .input-label { | |
| display: block; | |
| margin-bottom: 5px; | |
| font-weight: bold; | |
| } | |
| input[type="text"] { | |
| flex-grow: 1; | |
| padding: 8px; | |
| font-size: 16px; | |
| border: 1px solid #ccc; | |
| border-radius: 4px; | |
| } | |
| button { | |
| margin-left: 10px; | |
| padding: 8px 16px; | |
| font-size: 16px; | |
| background-color: #4caf50; | |
| color: white; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| } | |
| button[name="refresh"] { | |
| background-color: #f44336; | |
| } | |
| .error { | |
| color: red; | |
| margin: 15px 0; | |
| text-align: center; | |
| } | |
| .results { | |
| margin-top: 20px; | |
| } | |
| .results-header { | |
| margin-bottom: 20px; | |
| } | |
| .results-columns { | |
| display: flex; | |
| gap: 20px; | |
| } | |
| .column { | |
| flex: 1; | |
| border: 1px solid #ddd; | |
| border-radius: 4px; | |
| padding: 15px; | |
| } | |
| .column h3 { | |
| margin-top: 0; | |
| } | |
| img { | |
| max-width: 100%; | |
| height: auto; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Check Your Products Health</h1> | |
| <div class="form-container"> | |
| <div class="input-label"> | |
| Enter Product Code (ASIN): ASIN is a 10 digit number | |
| </div> | |
| <form method="POST" class="input-row"> | |
| <input | |
| type="text" | |
| name="product_code" | |
| value="{{ request.form.get('product_code', '') }}" | |
| /> | |
| <button type="submit" name="generate" value="true">Generate</button> | |
| <button type="submit" name="refresh" value="true">Refresh</button> | |
| </form> | |
| </div> | |
| {% if error %} | |
| <div class="error">{{ error }}</div> | |
| {% endif %} {% if result %} | |
| <div class="results"> | |
| <div class="results-header"> | |
| <h2>Product ID: {{ result.product_code }}</h2> | |
| <p>Total Reviews: {{ result.total_reviews }}</p> | |
| </div> | |
| <div class="results-columns"> | |
| <div class="column"> | |
| <h3> | |
| Positive Reviews: {{ "%.2f"|format(result.positive_percentage) }}% | |
| </h3> | |
| {% if result.positive_wordcloud %} | |
| <img | |
| src="data:image/png;base64,{{ result.positive_wordcloud }}" | |
| alt="Positive Reviews Word Cloud" | |
| /> | |
| {% endif %} | |
| </div> | |
| <div class="column"> | |
| <h3> | |
| Negative Reviews: {{ "%.2f"|format(result.negative_percentage) }}% | |
| </h3> | |
| {% if result.negative_wordcloud %} | |
| <img | |
| src="data:image/png;base64,{{ result.negative_wordcloud }}" | |
| alt="Negative Reviews Word Cloud" | |
| /> | |
| {% endif %} | |
| </div> | |
| </div> | |
| </div> | |
| {% endif %} | |
| </body> | |
| </html> | |