Spaces:

massimoavvisati
/

TarotAI

Running

App Files Files Community

massimoavvisati commited on Aug 23, 2024

Commit

9c96839

1 Parent(s): fa117a9

lfs fixed

Browse files

Files changed (29) hide show

icons/circle.png +3 -0
icons/hand-soft.png +3 -0
icons/hand.png +3 -0
icons/hand.svg +4 -0
icons/play.svg +7 -0
images/avatar-01.png +3 -0
images/avatar-02.png +3 -0
images/avatar-03.png +3 -0
images/avatar-04.png +3 -0
images/avatar-05.png +3 -0
images/avatar-06.png +3 -0
images/avatar-07.png +3 -0
images/deck-01-back.png +3 -0
images/deck-01.jpg +3 -0
images/deck-02-back.png +3 -0
images/deck-02.jpg +3 -0
images/deck-03-back.png +3 -0
images/deck-03.jpg +3 -0
images/deck-04-back.png +3 -0
images/deck-04.jpg +3 -0
images/deck-05-back.png +3 -0
images/deck-05.jpg +3 -0
images/deck-06-back.png +3 -0
images/deck-06.jpg +3 -0
images/deck-07-back.png +3 -0
images/deck-07.jpg +3 -0
index.html +105 -150
main.css +477 -0
main.js +294 -0

icons/circle.png ADDED Viewed

Git LFS Details

SHA256: e8bedb9c3f16bbc49111ed17abbd79679ecbc23f3233361904eaa60d0d7a60cc
Pointer size: 129 Bytes
Size of remote file: 9.18 kB

icons/hand-soft.png ADDED Viewed

Git LFS Details

SHA256: 8f3a50913d545dd5abbabd15d1ab8cc2b92cb5123794198751b18548ccc22ded
Pointer size: 129 Bytes
Size of remote file: 1.07 kB

icons/hand.png ADDED Viewed

Git LFS Details

SHA256: 06f30678a1567c9c7eb83b5042858c4db28ad1ee7e68ce210c01169fa4dd5971
Pointer size: 129 Bytes
Size of remote file: 1.1 kB

icons/hand.svg ADDED Viewed

icons/play.svg ADDED Viewed

images/avatar-01.png ADDED Viewed

Git LFS Details

SHA256: 0d9de8141f0925427c13d06091ac8b42cf8f2f1c04a0686754316a8245474520
Pointer size: 132 Bytes
Size of remote file: 1.12 MB

images/avatar-02.png ADDED Viewed

Git LFS Details

SHA256: 7cea7d90351bfdca8a31cdc26c950851e4b3e8f3e7b23a983d9e553a3a37debf
Pointer size: 132 Bytes
Size of remote file: 1.75 MB

images/avatar-03.png ADDED Viewed

Git LFS Details

SHA256: adeb002dc8fbdd9d3db9938f88533915ea9cf5a54249e723d9effb77b330d584
Pointer size: 131 Bytes
Size of remote file: 946 kB

images/avatar-04.png ADDED Viewed

Git LFS Details

SHA256: 685504d19806458fcb0287fcbc9dd04e548612e63bf500450a3f6eab8bae100e
Pointer size: 132 Bytes
Size of remote file: 1.64 MB

images/avatar-05.png ADDED Viewed

Git LFS Details

SHA256: 5c3567dee668022327522c2cb189f6eeca17546e12bae9995c8ea94e3a7a52fe
Pointer size: 132 Bytes
Size of remote file: 1.85 MB

images/avatar-06.png ADDED Viewed

Git LFS Details

SHA256: 01cf60069773dd6da46d32c3d5b948ea4a430bbd8fc1aef04053325c94eac1f6
Pointer size: 132 Bytes
Size of remote file: 1.49 MB

images/avatar-07.png ADDED Viewed

Git LFS Details

SHA256: 49d75945c46463af9b70309e6bbac14a06fc27094c6dc70e4bbebbd25906d382
Pointer size: 131 Bytes
Size of remote file: 443 kB

images/deck-01-back.png ADDED Viewed

Git LFS Details

SHA256: fee6d2810c5109bac562ca15ddfb304844f63550feb5e78b3f17a0b1d794b6a8
Pointer size: 131 Bytes
Size of remote file: 755 kB

images/deck-01.jpg ADDED Viewed

Git LFS Details

SHA256: 6e7cdce34a1bfb96fa5ca58adcebc8c784230f4a0e1cb4dd6ffde82a0a7145cd
Pointer size: 132 Bytes
Size of remote file: 2.03 MB

images/deck-02-back.png ADDED Viewed

Git LFS Details

SHA256: 557370d1e0f4d4259a03d13f6d718d6049d97032904556d74f7b6ebe98259fb4
Pointer size: 131 Bytes
Size of remote file: 723 kB

images/deck-02.jpg ADDED Viewed

Git LFS Details

SHA256: c69fe92b0ce74fe7fb657d458da0ddd4cee68e8411873a365e9a970041d779f5
Pointer size: 131 Bytes
Size of remote file: 713 kB

images/deck-03-back.png ADDED Viewed

Git LFS Details

SHA256: 0d2f8bbcd830c4a51ffeb7d71e3e6239d4a3ecb5a776ffb173c6ad6a10d06153
Pointer size: 131 Bytes
Size of remote file: 675 kB

images/deck-03.jpg ADDED Viewed

Git LFS Details

SHA256: 3e98e082e64422f64eb2ba8b4a6a5221b9a4a42ec01fec9a5753d41f10961805
Pointer size: 132 Bytes
Size of remote file: 1.02 MB

images/deck-04-back.png ADDED Viewed

Git LFS Details

SHA256: 796de1ce08d0082840b0eb61841eacb4516218065a9fa557d1ca9f260f5e9d5a
Pointer size: 131 Bytes
Size of remote file: 531 kB

images/deck-04.jpg ADDED Viewed

Git LFS Details

SHA256: ac8b6e8688f656b53c9efad94b3b2a592519d092d752f5104ec5d58834b74f38
Pointer size: 131 Bytes
Size of remote file: 879 kB

images/deck-05-back.png ADDED Viewed

Git LFS Details

SHA256: 9980872e981a9e3acd80028899080f9929588f6b35cffa92775a5c2187b23307
Pointer size: 131 Bytes
Size of remote file: 710 kB

images/deck-05.jpg ADDED Viewed

Git LFS Details

SHA256: 98d49f58930de5ee92d518dc7cc43acc91d864dd04209421ae908d71d00bf924
Pointer size: 132 Bytes
Size of remote file: 1.78 MB

images/deck-06-back.png ADDED Viewed

Git LFS Details

SHA256: aea3e8732d342558e7294a54cdc1da541791cda78e843213e8e3e846a1eb0b57
Pointer size: 131 Bytes
Size of remote file: 618 kB

images/deck-06.jpg ADDED Viewed

Git LFS Details

SHA256: 846febe178662964a26103eec70071de3775de0ac53cacf5f4686d4a1bf1549b
Pointer size: 131 Bytes
Size of remote file: 896 kB

images/deck-07-back.png ADDED Viewed

Git LFS Details

SHA256: 78a9e88dcf2ba5ce40a7c8834c0972367eb2c04f0897810a7fd1d514438837d5
Pointer size: 131 Bytes
Size of remote file: 799 kB

images/deck-07.jpg ADDED Viewed

Git LFS Details

SHA256: 437aa321d24d9121f898c2ab0398622ee05a804d71545a5703d776f86a9ff84d
Pointer size: 132 Bytes
Size of remote file: 1.45 MB

index.html CHANGED Viewed

@@ -2,159 +2,114 @@
 <html lang="en">
 <head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>Tarot Fortune Teller</title>
-	<style>
-		body {
-			font-family: 'Arial', sans-serif;
-			background-color: #1a1a2e;
-			color: #e0e0e0;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			height: 100vh;
-			margin: 0;
-			padding: 20px;
-			box-sizing: border-box;
-		}
-		.container {
-			background-color: #16213e;
-			border-radius: 15px;
-			padding: 30px;
-			box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
-			text-align: center;
-			max-width: 500px;
-			width: 100%;
-		}
-		h1 {
-			color: #e94560;
-			margin-bottom: 20px;
-		}
-		textarea {
-			width: 100%;
-			height: 100px;
-			margin-bottom: 20px;
-			padding: 10px;
-			border-radius: 5px;
-			border: none;
-			background-color: #0f3460;
-			color: #e0e0e0;
-			resize: vertical;
-		}
-		button {
-			background-color: #e94560;
-			color: #fff;
-			border: none;
-			padding: 10px 20px;
-			border-radius: 5px;
-			cursor: pointer;
-			transition: background-color 0.3s;
-		}
-		button:hover {
-			background-color: #c73e54;
-		}
-		#prediction {
-			margin-top: 20px;
-			font-style: italic;
-		}
-	</style>
 </head>
 <body>
-	<div class="container">
-		<h1>Tarot Fortune Teller</h1>
-		<textarea id="question" placeholder="Enter your question here..."></textarea>
-		<button onclick="getPrediction()">Reveal Your Fortune</button>
-		<p id="prediction"></p>
-	</div>
-	<script type="module">
-		import { Client } from 'https://cdn.jsdelivr.net/npm/@gradio/client@1.5.1/+esm'
-		import MarkdownIt from 'https://cdn.jsdelivr.net/npm/markdown-it@14.1.0/+esm'
-		const md = new MarkdownIt();
-		function drawThreeCards() {
-			const majorArcana = [
-				"The Fool",
-				"The Magician",
-				"The High Priestess",
-				"The Empress",
-				"The Emperor",
-				"The Hierophant",
-				"The Lovers",
-				"The Chariot",
-				"Strength",
-				"The Hermit",
-				"Wheel of Fortune",
-				"Justice",
-				"The Hanged Man",
-				"Death",
-				"Temperance",
-				"The Devil",
-				"The Tower",
-				"The Star",
-				"The Moon",
-				"The Sun",
-				"Judgement",
-				"The World"
-			];
-			// Shuffle the array
-			const shuffledDeck = majorArcana.sort(() => 0.5 - Math.random());
-			// Select the first three cards from the shuffled array
-			const selectedCards = shuffledDeck.slice(0, 3);
-			// Join the selected cards into a single string separated by commas
-			return selectedCards.join(", ");
-		}
-		window.getPrediction = async function () {
-			const question = document.getElementById('question').value;
-			const predictionElement = document.getElementById('prediction');
-			if (!question) {
-				predictionElement.textContent = "Please enter a question first.";
-				return;
-			}
-			predictionElement.textContent = "Consulting the cards...";
-			try {
-				const client = await Client.connect("hysts/zephyr-7b");
-				const result = await client.submit("/chat", {
-					message: `Cards: ${drawThreeCards()} User Question: ${question}`,
-					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",
-					max_new_tokens: 512,
-					// temperature: 0.7,
-					// top_p: 0.95,
-					// top_k: 50,
-					// repetition_penalty: 1,
-				});
-				let fullResponse = '';
-				for await (const msg of result) {
-					if (msg.type === "data") {
-						fullResponse = msg.data[0];
-						predictionElement.innerHTML = md.render(fullResponse);
-					}
-				}
-				//predictionElement.textContent = result.data[0];
-			} catch (error) {
-				console.error('Error:', error);
-				predictionElement.textContent = "The cards are clouded. Please try again later.";
-			}
-		}
-	</script>
 </body>
 </html>

 <html lang="en">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tarot AI Experience</title>
+    <meta name="description" content="An AI based tarot reading web app">
+    <!-- Precarica le immagini utilizzate nel CSS -->
+    <link rel="preload" as="image" href="./images/deck-01.jpg">
+    <link rel="preload" as="image" href="./images/deck-01-back.png">
+    <link rel="preload" as="image" href="./images/deck-02.jpg">
+    <link rel="preload" as="image" href="./images/deck-02-back.png">
+    <link rel="preload" as="image" href="./images/deck-03.jpg">
+    <link rel="preload" as="image" href="./images/deck-03-back.png">
+    <link rel="preload" as="image" href="./images/deck-04.jpg">
+    <link rel="preload" as="image" href="./images/deck-04-back.png">
+    <link rel="preload" as="image" href="./images/deck-05.jpg">
+    <link rel="preload" as="image" href="./images/deck-05-back.png">
+    <link rel="preload" as="image" href="./images/deck-06.jpg">
+    <link rel="preload" as="image" href="./images/deck-06-back.png">
+    <link rel="preload" as="image" href="./images/deck-07.jpg">
+    <link rel="preload" as="image" href="./images/deck-07-back.png">
+    <link rel="stylesheet" href="main.css">
+    <script type="module" src="main.js"></script>
 </head>
 <body>
+    <div id="cards-container">
+        <!-- Le card vengono generate dinamicamente con JavaScript -->
+    </div>
+    <dialog id="welcome">
+        <div>
+            <h1 style="text-align: center; font-size: 2em;">Tarot AI Experience</h1>
+            <p style="text-align: center;">An AI based tarot reading web app</p>
+            <p style="text-align: center; font-size: 0.8em;">by Massimo Avvisati</p>
+            <button id="start" class="continue-button"></button>
+        </div>
+    </dialog>
+    <dialog id="deck-selection">
+        <div class="toolbar"><button id="settings-button">•••</button></div>
+        <div id="fortune-tellers">
+            <div data-fortune-teller-id="01" class="fortune-teller-profile">
+                <div class="tag">AI</div>
+                <img src="./images/avatar-01.png" alt="Avatar" class="fortune-teller-avatar">
+            </div>
+            <div data-fortune-teller-id="02" class="fortune-teller-profile">
+                <div class="tag">AI</div>
+                <img src="./images/avatar-02.png" alt="Avatar" class="fortune-teller-avatar">
+            </div>
+            <div data-fortune-teller-id="03" class="fortune-teller-profile">
+                <div class="tag cpu">AI</div>
+                <img src="./images/avatar-03.png" alt="Avatar" class="fortune-teller-avatar">
+            </div>
+            <div data-fortune-teller-id="04" class="fortune-teller-profile">
+                <div class="tag">AI</div>
+                <img src="./images/avatar-04.png" alt="Avatar" class="fortune-teller-avatar">
+            </div>
+            <div data-fortune-teller-id="05" class="fortune-teller-profile">
+                <div class="tag">AI</div>
+                <img src="./images/avatar-05.png" alt="Avatar" class="fortune-teller-avatar">
+            </div>
+            <div data-fortune-teller-id="06" class="fortune-teller-profile">
+                <div class="tag human">AI</div>
+                <img src="./images/avatar-06.png" alt="Avatar" class="fortune-teller-avatar">
+            </div>
+            <div data-fortune-teller-id="07" class="fortune-teller-profile">
+                <div class="tag">AI</div>
+                <img src="./images/avatar-07.png" alt="Avatar" class="fortune-teller-avatar">
+            </div>
+            <div class="fortune-teller-buttons">
+                <button>+</button>
+            </div>
+            <div class="fortune-teller-buttons">
+                <button disabled id="fortune-teller-selected" class="continue-button"></button>
+            </div>
+        </div>
+    </dialog>
+    <dialog id="question">
+        <div class="container">
+            <!-- Textarea for user input -->
+            <textarea id="questionInput" spellcheck="false" rows="4"></textarea>
+            <!-- Button to ask for Tarot Reading -->
+            <div class="horizontal-buttons">
+                <button id="changeFortuneTellerButton">&laquo;</button>
+                <button id="questionButton">?</button>
+            </div>
+        </div>
+    </dialog>
+    <dialog id="response">
+        <div class="response-container">
+            <div class="current-fortune-teller"></div>
+            <div id="response-output"><span>.</span><span>.</span><span>.</span></div>
+            <div>
+                <button id="new-question">+</button>
+            </div>
+    </dialog>
+    <dialog id="settings">
+        <div class="toolbar">
+            <button id="close-settings-button">✖</button>
+        </div>
+        <div>
+            <div class="setting">
+                <label for="llm-server">Tarot LLM HuggingFace Space</label>
+                <input id="llm-server" type="text" spellcheck="false" autocomplete="false" value="hysts/zephyr-7b">
+            </div>
+        </div>
+    </dialog>
 </body>
 </html>

main.css ADDED Viewed

	@@ -0,0 +1,477 @@

+:root {
+    --default-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    --rose: #ff0069ff;
+    --violet-jtc: #542344ff;
+    --steel-blue: #2d82b7ff;
+    --magnolia: #fcf7ffff;
+    --pearl: #e6e1c5ff;
+    --card-size: 0.6;
+    --card-effect: linear-gradient(45deg, #0006, #fff3 70%);
+    font-family: var(--default-font-family);
+}
+body {
+    margin: 0;
+    background-size: 50%;
+    background-repeat: no-repeat;
+    background-position: left bottom;
+    background-color: #111;
+    height: 100lvh;
+}
+body.background-01 {
+    /* background-image: url("./images/background-02.png"), linear-gradient(270deg, #111 0%, #3c5462 90%); */
+    background-image: linear-gradient(270deg, #111 0%, #607d8b 90%);
+}
+body.background-02 {
+    /* background-image: url("./images/background-02.png"), linear-gradient(270deg, #111 0%, #3c5462 90%); */
+    background-image: linear-gradient(270deg, #111 0%, #3c5462 90%);
+}
+body.background-03 {
+    /* background-image: url("./images/background-02.png"), linear-gradient(270deg, #111 0%, #3c5462 90%); */
+    background-image: linear-gradient(270deg, #111 0%, #3c5462 90%);
+}
+body.background-04 {
+    background-image: linear-gradient(270deg, #111 0%, #009688 90%);
+}
+body.background-05 {
+    background-image: linear-gradient(270deg, #111 0%, #ac1444 90%);
+}
+body.background-06 {
+    background-image: linear-gradient(270deg, #111 0%, #795548 90%);
+}
+#fortune-tellers {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 1rem;
+}
+/*
+.fortune-teller-profile {
+    grid-template-rows: 30lvh;
+    grid-template-columns: 1fr 1fr;
+    grid-template-areas:'picture deck'
+    'bio bio';
+    max-width: min-content;
+    margin-block: 1rem;
+    display: grid;
+    overflow: auto;
+    align-self: center;
+    justify-items: center;
+} */
+.fortune-teller-profile {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    opacity: 0.3;
+    filter: grayscale();
+    border-radius: 50%;
+    border: 3px solid #fff3;
+    box-shadow: 0 0 20px #fff0;
+    transition: opacity 0.5s allow-discrete, box-shadow 1s;
+    aspect-ratio: 1;
+    position: relative;
+    width: 100%;
+    max-height: 20lvh;
+    overflow: hidden;
+    cursor: url("./icons/hand.png") 19 4, default;
+}
+.fortune-teller-profile.selected {
+    opacity: 1;
+    filter: grayscale(0);
+    box-shadow: 0 0 20px #ffff;
+}
+textarea {
+    background-color: transparent;
+    border: 0;
+    border-right: 1px solid #fff6;
+    font-size: 1rem;
+    min-width: 60lvw;
+    max-width: 80lvw;
+    font-size: clamp(1rem, 5lvh, 2.5rem);
+    color: inherit;
+}
+textarea:focus-visible {
+    outline: 0;
+    border-right: 1px solid #fff9;
+}
+.fortune-teller-profile p {
+    grid-area: bio;
+}
+.fortune-teller-profile .fortune-teller-avatar {
+    display: block;
+    aspect-ratio: 1;
+    height: 100%;
+    border-radius: 50%;
+}
+.fortune-teller-profile .fortune-teller-deck-back {
+    display: none;
+    grid-area: deck;
+    border-radius: 10%;
+}
+/*
+.fortune-teller-profile img {
+    display: block;
+    height: 100%;
+    width: auto;
+} */
+.fortune-teller-buttons {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+#cards-container {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+}
+.card {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-direction: column-reverse;
+    transition: top 0.7s, left 0.7s, rotate 0.5s;
+    transition-timing-function: cubic-bezier(0, -0.28, 0.75, -0.21);
+    width: 512px;
+    height: 768px;
+    background-image: linear-gradient(0deg, #000, #fff);
+    border-radius: 6%;
+    position: absolute;
+    transform: translate(-50%, -50%) scale(var(--card-size)) rotateY(0deg);
+    border: 3px solid wheat;
+    box-shadow: 0 0 10px black;
+    top: 50lvh;
+    left: 50lvw;
+}
+.card.rotated {
+    transform: translate(-50%, -50%) scale(var(--card-size)) rotateY(90deg);
+}
+.card.flipped h2 {
+    display: none;
+}
+button {
+    cursor: url("./icons/hand.png") 19 4, default;
+    width: 4rem;
+    height: 4rem;
+    background-color: #3336;
+    border-radius: 50%;
+    border: 0;
+    backdrop-filter: blur(10px);
+    background-image: none;
+    font-size: 2rem;
+    color: white;
+    background-size: 3rem;
+    background-position: center;
+}
+button.continue-button {
+    background-image: url(./icons/play.svg);
+}
+div.toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 1rem 0;
+}
+#settings-button {
+    letter-spacing: 3px;
+    font-size: 1rem;
+}
+#close-settings-button {
+    font-size: 1.5rem;
+    color: #fff9;
+}
+div.horizontal-buttons {
+    display: flex;
+    justify-content: space-between;
+}
+.card h2 {
+    text-align: center;
+    background-image: linear-gradient(0deg, #fff 0%, #fff3 140%);
+    border-radius: 15%;
+    padding: 4px 5px;
+    text-shadow: 0 0 3px #333;
+    color: #111;
+    border: 1px solid #fff6;
+}
+body.background-01 .card {
+    background-image: var(--card-effect), url(./images/deck-01.jpg)
+}
+body.background-01 .card.flipped {
+    background-image: linear-gradient(45deg, #0006, #fff3 70%), url(./images/deck-01-back.png);
+}
+body.background-02 .card {
+    background-image: linear-gradient(45deg, #0006, #fff3 70%), url(./images/deck-02.jpg)
+}
+body.background-02 .card.flipped {
+    background-image: linear-gradient(45deg, #0006, #fff3 70%), url('./images/deck-02-back.png');
+}
+body.background-03 .card {
+    background-image: linear-gradient(45deg, #0006, #fff3 70%), url(./images/deck-03.jpg)
+}
+body.background-03 .card.flipped {
+    background-image: linear-gradient(45deg, #0006, #fff3 70%), url('./images/deck-03-back.png');
+}
+body.background-05 .card {
+    background-image: linear-gradient(45deg, #0006, #fff3 70%), url(./images/deck-05.jpg)
+}
+body.background-05 .card.flipped {
+    background-image: linear-gradient(45deg, #0006, #fff3 70%), url('./images/deck-05-back.png');
+}
+body.background-04 .card {
+    background-image: url(./images/deck-04.jpg)
+}
+body.background-04 .card.flipped {
+    background-image: url('./images/deck-04-back.png');
+}
+body.background-06 .card {
+    background-image: url(./images/deck-06.jpg)
+}
+body.background-06 .card.flipped {
+    background-image: url('./images/deck-06-back.png');
+}
+body.background-07 .card {
+    background-image: url(./images/deck-07.jpg)
+}
+body.background-07 .card.flipped {
+    background-image: url('./images/deck-07-back.png');
+}
+dialog {
+    cursor: url("./icons/hand-soft.png") 19 4, default;
+    font-size: 1rem;
+    backdrop-filter: blur(10px);
+    background-image: linear-gradient(0deg, #fff3, transparent);
+    border-radius: 2rem;
+    border: #fff1 solid 2px;
+    background-color: transparent;
+    padding: 1rem 2rem 2rem 2rem;
+    text-align: center;
+    color: white;
+    text-shadow: 0 0 5px #fffc;
+}
+div.tag {
+    position: absolute;
+    bottom: 10px;
+    font-size: 1rem;
+    background-image: linear-gradient(45deg, #CDDC39, #8BC34A);
+    padding: 0.2rem 1rem;
+    border-radius: 1rem;
+    font-family: monospace;
+    color: #333;
+    text-shadow: 0 0 1px #444;
+}
+div.tag.human {
+    background-image: linear-gradient(45deg, #FFEB3B, #ff9800);
+}
+div.tag.cpu {
+    background-image: linear-gradient(45deg, #2196F3, #00BCD4);
+}
+/* DIALOGS */
+/*   Open state of the dialog  */
+dialog[open] {
+    opacity: 1;
+}
+/*   Closed state of the dialog   */
+dialog {
+    opacity: 0;
+    transition: all 0.7s allow-discrete;
+}
+/*   Before-open state  */
+/* Needs to be after the previous dialog[open] rule to take effect,
+      as the specificity is the same */
+@starting-style {
+    dialog[open] {
+        opacity: 0;
+    }
+}
+/* Transition the :backdrop when the dialog modal is promoted to the top layer */
+dialog::backdrop {
+    background-color: rgba(0, 0, 0, 0);
+    transition: all 0.7s allow-discrete;
+}
+dialog[open]::backdrop {
+    background-color: rgb(0 0 0 / 25%);
+}
+/* This starting-style rule cannot be nested inside the above selector
+  because the nesting selector cannot represent pseudo-elements. */
+@starting-style {
+    dialog[open]::backdrop {
+        background-color: rgb(0 0 0 / 0%);
+    }
+}
+dialog div {
+    text-align: center;
+    color: white;
+}
+#settings div {
+    text-align: left;
+    font-size: 1.3rem;
+}
+#settings h2 {
+    font-weight: 400;
+    font-size: 1.2rem;
+}
+div.setting {
+    margin: 2rem 0;
+}
+div.setting label {
+    display: block;
+}
+div.setting input {
+    display: block;
+    font-size: 1.3rem;
+    width: 42ch;
+    background: #fff1;
+    color: #cddc39;
+    padding: 0.5rem 1rem;
+    border: 0;
+    font-family: 'Courier New', Courier, monospace;
+}
+div.setting input::placeholder {
+}
+/* response dialog */
+#response {
+    margin-bottom: 1lvh;
+}
+div.response-container {
+    grid-template-columns: 2fr 3fr 1fr;
+    align-items: center;
+    max-width: 80lvw;
+    display: grid;
+}
+#response-output span {
+    display: inline-block;
+}
+@keyframes bounce {
+    0% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-10px);
+    }
+    100% {
+        transform: translateY(0);
+    }
+}
+#response-output span:nth-child(1) {
+    animation: bounce 3s infinite 0.5s;
+}
+#response-output span:nth-child(2) {
+    animation: bounce 3s infinite 1.0s;
+}
+#response-output span:nth-child(3) {
+    animation: bounce 3s infinite 1.5s;
+}
+div.current-fortune-teller {
+    aspect-ratio: 1;
+    background-size: cover;
+    height: 30lvh;
+    display: flex;
+    margin: auto;
+    border-radius: 10%;
+}
+body.background-01 div.current-fortune-teller {
+    background-image: url(./images/avatar-01.png);
+}
+body.background-02 div.current-fortune-teller {
+    background-image: url(./images/avatar-02.png);
+}
+body.background-03 div.current-fortune-teller {
+    background-image: url(./images/avatar-03.png);
+}
+body.background-04 div.current-fortune-teller {
+    background-image: url(./images/avatar-04.png);
+}
+body.background-05 div.current-fortune-teller {
+    background-image: url(./images/avatar-05.png);
+}
+body.background-06 div.current-fortune-teller {
+    background-image: url(./images/avatar-06.png);
+}
+body.background-07 div.current-fortune-teller {
+    background-image: url(./images/avatar-07.png);
+}

main.js ADDED Viewed

	@@ -0,0 +1,294 @@

+import { Client } from 'https://cdn.jsdelivr.net/npm/@gradio/client@1.5.1/+esm'
+import MarkdownIt from 'https://cdn.jsdelivr.net/npm/markdown-it@14.1.0/+esm'
+const md = new MarkdownIt();
+const majorArcana = [
+    "The Fool",
+    "The Magician",
+    "The High Priestess",
+    "The Empress",
+    "The Emperor",
+    "The Hierophant",
+    "The Lovers",
+    "The Chariot",
+    "Strength",
+    "The Hermit",
+    "Wheel of Fortune",
+    "Justice",
+    "The Hanged Man",
+    "Death",
+    "Temperance",
+    "The Devil",
+    "The Tower",
+    "The Star",
+    "The Moon",
+    "The Sun",
+    "Judgement",
+    "The World"
+];
+const ask = async function (question, card1, card2, card3) {
+    const predictionElement = document.getElementById('response-output');
+    const llmSpace = document.getElementById('llm-server').value;
+    if (!question) {
+        predictionElement.textContent = "Please enter a question first.";
+        return;
+    }
+    predictionElement.innerHTML = '<span>.</span><span>.</span><span>.</span>';
+    try {
+        const client = await Client.connect(llmSpace);
+        const result = await client.submit("/chat", {
+            message: `${question}`,
+            system_prompt: `You are multilingual tarot card reader and fortune teller. You picked from your Tarot Deck **${majorArcana[card1]}**, **${majorArcana[card2]}**, **${majorArcana[card3]}**. Answer to the question using same language and format using Markdown.`,
+            max_new_tokens: 288,
+            // temperature: 0.7,
+            // top_p: 0.95,
+            // top_k: 50,
+            // repetition_penalty: 1,
+        });
+        let fullResponse = '';
+        for await (const msg of result) {
+            if (msg.type === "data") {
+                fullResponse = msg.data[0];
+                predictionElement.innerHTML = md.render(fullResponse);
+            } else {
+                console.log(msg)
+            }
+        }
+    } catch (error) {
+        console.error('Error:', error);
+        predictionElement.textContent = "The cards are clouded. Please try again later.";
+    }
+}
+document.addEventListener('DOMContentLoaded', () => {
+    const welcomeDialog = document.getElementById('welcome');
+    const deckSelectionDialog = document.getElementById('deck-selection');
+    const questionDialog = document.getElementById('question');
+    const responseDialog = document.getElementById('response');
+    const cardsContainer = document.getElementById("cards-container");
+    const settingsDialog = document.getElementById('settings');
+    // Funzione per aprire il dialogo di benvenuto
+    function openWelcomeDialog() {
+        welcomeDialog.showModal();
+    }
+    // Funzione per aprire il dialogo di selezione del mazzo
+    function openDeckSelectionDialog() {
+        welcomeDialog.close(); // Chiudi il dialogo di benvenuto
+        deckSelectionDialog.showModal(); // Apri il dialogo di selezione del mazzo
+    }
+    const fortuneTellerProfiles = document.querySelectorAll('.fortune-teller-profile');
+    fortuneTellerProfiles.forEach(profile => {
+        const fortuneTellerId = profile.getAttribute('data-fortune-teller-id');
+        profile.addEventListener('click', (event) => {
+            changeBackgroundImage(fortuneTellerId); // Cambia il background-image di body
+        });
+    });
+    const CARDS_WIDTH = 512;
+    const CARDS_HEIGHT = 768;
+    const CARDS_NUMERALS = ['0', 'I', 'II', 'III', 'IV', '', 'VI', 'VII', 'VIII', 'IX', 'X', 'XI', 'XII', 'XIII', 'XIV', 'XV', 'XVI', 'XVII', 'XVIII', 'XIX', 'XX', 'XXI', 'XXII'];
+    function resetDeck() {
+        cardsContainer.innerHTML = ''; // Rimuove le card esistenti
+        for (let i = 0; i < 22; i++) {
+            const card = document.createElement("div");
+            card.classList.add("card");
+            card.id = `card-${i}`;
+            card.innerHTML = `<h2>${CARDS_NUMERALS[i]}</h2>`;
+            const randomX = parseInt(1 + Math.random() * 8) * 10;
+            const randomY = parseInt(3 + Math.random() * 4) * 10;
+            card.style.top = randomY + "lvh";
+            card.style.left = randomX + "lvw";
+            card.style.backgroundPositionX = -(parseInt(i % 11) * CARDS_WIDTH) + "px";
+            card.style.backgroundPositionY = -(parseInt(i / 11) * CARDS_HEIGHT) + "px";
+            cardsContainer.appendChild(card);
+        }
+    }
+    // Funzione per cambiare il background-image di body in base all'ID del cartomante
+    function changeBackgroundImage(fortuneTellerId) {
+        selectedButton.removeAttribute('disabled');
+        const oldSelectedItem = document.querySelector('.fortune-teller-profile.selected');
+        if (oldSelectedItem && oldSelectedItem.getAttribute('data-fortune-teller-id') == fortuneTellerId) {
+            return;
+        }
+        resetDeck()
+        document.body.classList.remove('background-01', 'background-02', 'background-03', 'background-04', 'background-05', 'background-06', 'background-07');
+        const fortuneTellerClass = 'background-' + fortuneTellerId;
+        document.body.classList.add(fortuneTellerClass);
+        const newSelectedItem = document.querySelector(`[data-fortune-teller-id="${fortuneTellerId}"]`)
+        if (oldSelectedItem) {
+            oldSelectedItem.classList.remove('selected');
+        }
+        newSelectedItem.classList.add('selected');
+    }
+    const openSettingsDialog = () => {
+        settingsDialog.showModal();
+    }
+    const closeSettingsDialog = () => {
+        settingsDialog.close();
+    }
+    const startButton = document.getElementById('start');
+    startButton.addEventListener('click', openDeckSelectionDialog);
+    const settingsButton = document.getElementById('settings-button');
+    settingsButton.addEventListener('click', openSettingsDialog);
+    const closeSettingsButton = document.getElementById('close-settings-button');
+    closeSettingsButton.addEventListener('click', closeSettingsDialog);
+    const selectedButton = document.getElementById('fortune-teller-selected');
+    selectedButton.addEventListener('click', () => {
+        deckSelectionDialog.close(); // Chiudi il dialogo di selezione del mazzo
+        questionDialog.showModal(); // Apri il dialogo delle domande
+    });
+    function recollectCards(positionX = 50, positionY = 50) {
+        return new Promise((resolve, reject) => {
+            const deck = Array.from(document.querySelectorAll('.card'));
+            const animationDuration = 1000; // Durata dell'animazione in millisecondi
+            deck.forEach((card, index) => {
+                // card.style.transition = `top ${animationDuration}ms ease-out, left ${animationDuration}ms ease-out`;
+                card.classList.add('flipped');
+                card.style.top = positionY + 'lvh';
+                card.style.left = positionX + 'lvw';
+                // Utilizziamo l'ultimo elemento nell'array per individuare la fine dell'animazione
+                if (index === deck.length - 1) {
+                    card.addEventListener('transitionend', () => {
+                        resolve(); // Risolviamo la Promise quando l'ultima carta ha terminato l'animazione
+                    }, { once: true });
+                }
+            });
+        });
+    }
+    function shuffleCards() {
+        const cardsContainer = document.getElementById('cards-container');
+        const cards = cardsContainer.querySelectorAll('.card');
+        // Convertiamo NodeList in un array per poterlo manipolare facilmente
+        const cardsArray = Array.from(cards);
+        // Usiamo l'algoritmo di Fisher-Yates per mescolare l'array
+        for (let i = cardsArray.length - 1; i > 0; i--) {
+            const j = Math.floor(Math.random() * (i + 1));
+            [cardsArray[i], cardsArray[j]] = [cardsArray[j], cardsArray[i]];
+        }
+        // Rimuoviamo le carte esistenti dal container
+        cardsContainer.innerHTML = '';
+        // Aggiungiamo le carte mescolate nuovamente al container
+        cardsArray.forEach(card => {
+            cardsContainer.appendChild(card);
+            card.style.top = '50lvh';
+            card.style.left = '50lvw';
+        });
+    }
+    const questionButton = document.getElementById('questionButton');
+    questionButton.addEventListener('click', () => {
+        recollectCards().then(() => {
+            shuffleCards();
+            const animation = () => {
+                recollectCards(100, 10).then(() => {
+                    setTimeout(() => {
+                        const cardsContainer = document.getElementById('cards-container');
+                        const cards = Array.from(cardsContainer.querySelectorAll('.card'));
+                        const card1 = cards[21];
+                        card1.addEventListener('transitionend', () => {
+                            card1.classList.remove('flipped')
+                        }, { once: true });
+                        card1.style.top = '30lvh';
+                        card1.style.left = '30lvw';
+                        const card2 = cards[20];
+                        card2.addEventListener('transitionend', () => {
+                            card2.classList.remove('flipped')
+                            card2.style.transitionDelay = '0s';
+                        }, { once: true });
+                        card2.style.transitionDelay = '0.6s'
+                        card2.style.top = '30lvh';
+                        card2.style.left = '50lvw';
+                        const card3 = cards[19];
+                        card3.addEventListener('transitionend', () => {
+                            card3.classList.remove('flipped')
+                            card3.style.transitionDelay = '0s';
+                            setTimeout(() => {
+                                responseDialog.showModal();
+                            }, 1000)
+                        }, { once: true });
+                        card3.style.top = '30lvh';
+                        card3.style.left = '70lvw';
+                        card3.style.transitionDelay = '1.2s'
+                        const cardID1 = parseInt(card1.getAttribute('id').replace('card-', ''));
+                        const cardID2 = parseInt(card2.getAttribute('id').replace('card-', ''))
+                        const cardID3 = parseInt(card3.getAttribute('id').replace('card-', ''))
+                        const question = document.getElementById('questionInput').value;
+                        ask(question, cardID1, cardID2, cardID3);
+                    }, 600);
+                })
+            }
+            setTimeout(animation, 600);
+        })
+        //deckSelectionDialog.close(); // Chiudi il dialogo di selezione del mazzo
+        questionDialog.close(); // Apri il dialogo delle domande
+    });
+    const newQuestionButton = document.getElementById('new-question');
+    newQuestionButton.addEventListener('click', () => {
+        responseDialog.close();
+        const responseOutputElement = document.getElementById('response-output');
+        document.getElementById('questionInput').value = ''
+        responseOutputElement.innerHTML = '<span>.</span><span>.</span><span>.</span>'
+        questionDialog.showModal();
+    })
+    const changeFortuneTellerButton = document.getElementById('changeFortuneTellerButton');
+    changeFortuneTellerButton.addEventListener('click', () => {
+        questionDialog.close();
+        openDeckSelectionDialog();
+    })
+    // Chiamata alla funzione per aprire il dialogo di benvenuto all'avvio dell'app
+    openDeckSelectionDialog();
+});