Hugging Face's logo

Spaces:
mgbam
/
CryptoSentinel_AI
Running

App Files Community
mgbam commited on
Commit
4c64df5
·
verified ·
1 Parent(s): c402b7d

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +91 -11
templates/index.html CHANGED
@@ -1,38 +1,118 @@
1
  <!DOCTYPE html>
2
- <html lang="en">
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <!-- Using a modern, lightweight CSS framework for better styling -->
 
 
7
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
 
 
8
  <script src="https://unpkg.com/[email protected]" integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC" crossorigin="anonymous"></script>
9
- <title>Crypto Price Dashboard</title>
 
10
  <style>
 
11
  body { container-type: inline-size; }
12
- .error { color: var(--pico-color-red-500); }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
13
  </style>
14
  </head>
15
- <body>
 
 
 
16
  <main class="container">
17
- <header>
18
- <h1>Real-Time Cryptocurrency Prices</h1>
19
- <p>Prices update automatically every 10 seconds.</p>
20
  </header>
21
 
 
22
  <article>
 
23
  <div
24
  id="prices"
25
  hx-get="/api/prices"
26
  hx-trigger="load, every 10s"
27
- hx-swap="innerHTML">
28
- <!-- This htmx-indicator will be shown during the request -->
 
29
  <p aria-busy="true">Fetching latest prices...</p>
30
  </div>
31
  </article>
32
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
33
  <footer>
34
- <small>Data sourced from <a href="https://www.coingecko.com/">CoinGecko</a>.</small>
35
  </footer>
36
  </main>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
37
  </body>
38
  </html>
 
1
  <!DOCTYPE html>
2
+ <html lang="en" data-theme="dark">
3
+
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>CryptoSentinel AI Dashboard</title>
8
+
9
+ <!-- Pico.css for modern, clean styling -->
10
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
11
+
12
+ <!-- HTMX Core and Server-Sent Events (SSE) Extension -->
13
  <script src="https://unpkg.com/[email protected]" integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC" crossorigin="anonymous"></script>
14
+ <script src="https://unpkg.com/htmx.org/dist/ext/sse.js"></script>
15
+
16
  <style>
17
+ /* Add some spacing and alignment for a cleaner look */
18
  body { container-type: inline-size; }
19
+ main.container {
20
+ max-width: 800px;
21
+ margin: 2rem auto;
22
+ }
23
+ .htmx-indicator {
24
+ display: none; /* Hide indicator by default */
25
+ }
26
+ .htmx-request .htmx-indicator {
27
+ display: inline; /* Show when a request is in flight */
28
+ }
29
+ .htmx-request .hide-on-request {
30
+ display: none; /* Hide element during request */
31
+ }
32
+ .sentiment-positive { color: var(--pico-color-green-400); }
33
+ .sentiment-negative { color: var(--pico-color-red-400); }
34
+ .sentiment-error { color: var(--pico-color-amber-400); }
35
+ #sentiment-results div {
36
+ border-bottom: 1px solid var(--pico-muted-border-color);
37
+ padding-bottom: 1rem;
38
+ margin-bottom: 1rem;
39
+ }
40
  </style>
41
  </head>
42
+
43
+ <!-- Enable the SSE extension for the whole body -->
44
+ <body hx-ext="sse">
45
+
46
  <main class="container">
47
+ <header style="text-align: center;">
48
+ <h1>🤖 CryptoSentinel AI</h1>
49
+ <p>Real-Time Market Prices & Sentiment Analysis</p>
50
  </header>
51
 
52
+ <!-- Section 1: Live Prices -->
53
  <article>
54
+ <header><strong>Market Snapshot</strong></header>
55
  <div
56
  id="prices"
57
  hx-get="/api/prices"
58
  hx-trigger="load, every 10s"
59
+ hx-swap="innerHTML"
60
+ aria-live="polite">
61
+ <!-- Initial loading state -->
62
  <p aria-busy="true">Fetching latest prices...</p>
63
  </div>
64
  </article>
65
 
66
+ <!-- Section 2: Sentiment Analysis -->
67
+ <article>
68
+ <header><strong>Sentiment Analyzer</strong></header>
69
+
70
+ <!-- Form for submitting text -->
71
+ <form
72
+ hx-post="/api/sentiment"
73
+ hx-target="#analysis-status"
74
+ hx-swap="innerHTML"
75
+ hx-on::after-request="this.reset()">
76
+ <label for="sentiment-text">Analyze market chatter, news, or a tweet:</label>
77
+ <textarea id="sentiment-text" name="text" placeholder="e.g., 'The market is pumping! To the moon! 🚀'" required></textarea>
78
+
79
+ <button type="submit">
80
+ <span class="hide-on-request">Analyze Sentiment</span>
81
+ <span class="htmx-indicator" aria-busy="true">Analyzing...</span>
82
+ </button>
83
+ <small id="analysis-status" style="margin-left: 1rem;"></small>
84
+ </form>
85
+
86
+ <!-- Area for real-time results from the SSE stream -->
87
+ <section>
88
+ <h5>Real-Time Results</h5>
89
+ <div
90
+ id="sentiment-results"
91
+ hx-sse="connect:/api/sentiment/stream"
92
+ hx-swap="afterbegin">
93
+ <!-- New results will be prepended here by HTMX -->
94
+ <p><small>Waiting for first analysis...</small></p>
95
+ </div>
96
+ </section>
97
+ </article>
98
+
99
  <footer>
100
+ <small>Price data sourced from CoinGecko & CoinCap. Sentiment analysis via Hugging Face.</small>
101
  </footer>
102
  </main>
103
+
104
+ <!-- Template for new sentiment results -->
105
+ <!-- This is not used directly, but shows the structure our server should send -->
106
+ <template id="sentiment-item-template">
107
+ <div>
108
+ <blockquote>"{text}"</blockquote>
109
+ <p>
110
+ <strong>Result:</strong>
111
+ <span class="sentiment-{label}">{label}</span>
112
+ (Confidence: {score})
113
+ </p>
114
+ </div>
115
+ </template>
116
+
117
  </body>
118
  </html>