Hugging Face's logo

Spaces:
mgbam
/
CryptoSentinel_AI
Running

App Files Community
mgbam commited on
Commit
501d31d
·
verified ·
1 Parent(s): c131913

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +40 -96
templates/index.html CHANGED
@@ -1,118 +1,62 @@
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>
 
1
  <!DOCTYPE html>
2
  <html lang="en" data-theme="dark">
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>CryptoSentinel Pro</title>
7
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
8
+ <script src="https://unpkg.com/[email protected]"></script>
 
 
 
 
9
  <script src="https://unpkg.com/htmx.org/dist/ext/sse.js"></script>
 
10
  <style>
11
+ .card { border-left-width: 4px; border-left-style: solid; margin-bottom: 1.5rem; }
12
+ .impact-low { border-left-color: var(--pico-color-cyan-500); }
13
+ .impact-medium { border-left-color: var(--pico-color-amber-500); }
14
+ .impact-high { border-left-color: var(--pico-color-red-600); }
 
 
 
 
 
 
 
 
 
 
 
15
  .sentiment-positive { color: var(--pico-color-green-400); }
16
  .sentiment-negative { color: var(--pico-color-red-400); }
17
+ .sentiment-neutral { color: var(--pico-color-gray-400); }
18
+ blockquote { font-style: italic; }
 
 
 
 
19
  </style>
20
  </head>
 
 
21
  <body hx-ext="sse">
 
22
  <main class="container">
23
  <header style="text-align: center;">
24
+ <h1>🤖 CryptoSentinel Pro</h1>
25
+ <p>AI-Powered Market Intelligence</p>
26
  </header>
27
 
28
+ <div class="grid">
29
+ <!-- Left Column: Manual Analysis & Prices -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
30
  <section>
31
+ <article>
32
+ <header><strong>Market Snapshot</strong></header>
33
+ <div id="prices" hx-get="/api/prices" hx-trigger="load, every 30s" hx-swap="innerHTML">
34
+ <p aria-busy="true">Fetching prices...</p>
35
+ </div>
36
+ </article>
37
+ <article>
38
+ <header><strong>Manual Analysis</strong></header>
39
+ <form hx-post="/api/sentiment" hx-target="#analysis-status" hx-on::after-request="this.reset()">
40
+ <textarea name="text" placeholder="Paste news headline or tweet here..." required></textarea>
41
+ <button type="submit">Run Deep Analysis</button>
42
+ <small id="analysis-status"></small>
43
+ </form>
44
+ <div id="manual-results" hx-sse="connect:/api/sentiment/stream" hx-swap="afterbegin">
45
+ <!-- Manual analysis results appear here -->
46
+ </div>
47
+ </article>
48
  </section>
 
49
 
50
+ <!-- Right Column: Automated News Feed -->
51
+ <section>
52
+ <article>
53
+ <header><strong>Automated Market Intelligence Feed</strong></header>
54
+ <div id="news-feed" hx-sse="connect:/api/news/stream" hx-swap="afterbegin">
55
+ <p aria-busy="true">Initializing live news feed...</p>
56
+ </div>
57
+ </article>
58
+ </section>
 
 
 
 
 
 
59
  </div>
60
+ </main>
 
61
  </body>
62
  </html>