Hugging Face's logo

Spaces:
massimoavvisati
/
TarotAI
Running

App Files Community
massimoavvisati commited on
Commit
3beb5b8
·
1 Parent(s): 870fd97

WIP

Browse files
Files changed (1) hide show
  1. index.html +160 -19
index.html CHANGED
@@ -1,19 +1,160 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Tarot Fortune Teller</title>
8
+ <style>
9
+ body {
10
+ font-family: 'Arial', sans-serif;
11
+ background-color: #1a1a2e;
12
+ color: #e0e0e0;
13
+ display: flex;
14
+ justify-content: center;
15
+ align-items: center;
16
+ height: 100vh;
17
+ margin: 0;
18
+ padding: 20px;
19
+ box-sizing: border-box;
20
+ }
21
+
22
+ .container {
23
+ background-color: #16213e;
24
+ border-radius: 15px;
25
+ padding: 30px;
26
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
27
+ text-align: center;
28
+ max-width: 500px;
29
+ width: 100%;
30
+ }
31
+
32
+ h1 {
33
+ color: #e94560;
34
+ margin-bottom: 20px;
35
+ }
36
+
37
+ textarea {
38
+ width: 100%;
39
+ height: 100px;
40
+ margin-bottom: 20px;
41
+ padding: 10px;
42
+ border-radius: 5px;
43
+ border: none;
44
+ background-color: #0f3460;
45
+ color: #e0e0e0;
46
+ resize: vertical;
47
+ }
48
+
49
+ button {
50
+ background-color: #e94560;
51
+ color: #fff;
52
+ border: none;
53
+ padding: 10px 20px;
54
+ border-radius: 5px;
55
+ cursor: pointer;
56
+ transition: background-color 0.3s;
57
+ }
58
+
59
+ button:hover {
60
+ background-color: #c73e54;
61
+ }
62
+
63
+ #prediction {
64
+ margin-top: 20px;
65
+ font-style: italic;
66
+ }
67
+ </style>
68
+ </head>
69
+
70
+ <body>
71
+ <div class="container">
72
+ <h1>Tarot Fortune Teller</h1>
73
+ <textarea id="question" placeholder="Enter your question here..."></textarea>
74
+ <button onclick="getPrediction()">Reveal Your Fortune</button>
75
+ <p id="prediction"></p>
76
+ </div>
77
+
78
+ <script type="module">
79
+ import { Client } from 'https://cdn.jsdelivr.net/npm/@gradio/[email protected]/+esm'
80
+ import MarkdownIt from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm'
81
+
82
+ const md = new MarkdownIt();
83
+
84
+ function drawThreeCards() {
85
+ const majorArcana = [
86
+ "The Fool",
87
+ "The Magician",
88
+ "The High Priestess",
89
+ "The Empress",
90
+ "The Emperor",
91
+ "The Hierophant",
92
+ "The Lovers",
93
+ "The Chariot",
94
+ "Strength",
95
+ "The Hermit",
96
+ "Wheel of Fortune",
97
+ "Justice",
98
+ "The Hanged Man",
99
+ "Death",
100
+ "Temperance",
101
+ "The Devil",
102
+ "The Tower",
103
+ "The Star",
104
+ "The Moon",
105
+ "The Sun",
106
+ "Judgement",
107
+ "The World"
108
+ ];
109
+
110
+ // Shuffle the array
111
+ const shuffledDeck = majorArcana.sort(() => 0.5 - Math.random());
112
+
113
+ // Select the first three cards from the shuffled array
114
+ const selectedCards = shuffledDeck.slice(0, 3);
115
+
116
+ // Join the selected cards into a single string separated by commas
117
+ return selectedCards.join(", ");
118
+ }
119
+
120
+ window.getPrediction = async function () {
121
+ const question = document.getElementById('question').value;
122
+ const predictionElement = document.getElementById('prediction');
123
+
124
+ if (!question) {
125
+ predictionElement.textContent = "Please enter a question first.";
126
+ return;
127
+ }
128
+
129
+ predictionElement.textContent = "Consulting the cards...";
130
+
131
+ try {
132
+ const client = await Client.connect("hysts/zephyr-7b");
133
+ const result = await client.submit("/chat", {
134
+ message: `Cards: ${drawThreeCards()} User Question: ${question}`,
135
+ system_prompt: "You are an expert fortune teller capable of interpreting tarot cards giving a quick answer and a bit of interpretation in the native language of the User Question",
136
+ max_new_tokens: 512,
137
+ // temperature: 0.7,
138
+ // top_p: 0.95,
139
+ // top_k: 50,
140
+ // repetition_penalty: 1,
141
+ });
142
+
143
+ let fullResponse = '';
144
+ for await (const msg of result) {
145
+ if (msg.type === "data") {
146
+ fullResponse = msg.data[0];
147
+ predictionElement.innerHTML = md.render(fullResponse);
148
+ }
149
+ }
150
+
151
+ //predictionElement.textContent = result.data[0];
152
+ } catch (error) {
153
+ console.error('Error:', error);
154
+ predictionElement.textContent = "The cards are clouded. Please try again later.";
155
+ }
156
+ }
157
+ </script>
158
+ </body>
159
+
160
+ </html>