Spaces:
Running
Running
Create app.py
Browse files
app.py
ADDED
|
@@ -0,0 +1,524 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
mport http.server
|
| 2 |
+
import socketserver
|
| 3 |
+
import os
|
| 4 |
+
|
| 5 |
+
HTML_CONTENT = r"""<!doctype html>
|
| 6 |
+
<html lang="en">
|
| 7 |
+
<head>
|
| 8 |
+
<meta charset="UTF-8">
|
| 9 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 10 |
+
<title>SpiceeChat</title>
|
| 11 |
+
<style>
|
| 12 |
+
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=DM+Sans:wght@300;400;500&display=swap');
|
| 13 |
+
#sc-wrap *, #sc-wrap *::before, #sc-wrap *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
| 14 |
+
#sc-wrap {
|
| 15 |
+
--rose: #c94b6e; --rose-dark: #a03358; --rose-light: #f4d0db;
|
| 16 |
+
--cream: #faf7f4; --dark: #1a1118; --dark-2: #2d1f2a;
|
| 17 |
+
--muted: #8a7580; --border: rgba(201,75,110,0.15);
|
| 18 |
+
font-family: 'DM Sans', sans-serif;
|
| 19 |
+
background: var(--cream);
|
| 20 |
+
color: var(--dark);
|
| 21 |
+
overflow-x: hidden;
|
| 22 |
+
width: 100%;
|
| 23 |
+
}
|
| 24 |
+
/* NAV */
|
| 25 |
+
#sc-wrap .sc-nav {
|
| 26 |
+
width: 100%; display: flex; align-items: center; justify-content: space-between;
|
| 27 |
+
padding: 20px 60px; background: white;
|
| 28 |
+
border-bottom: 1px solid var(--border);
|
| 29 |
+
}
|
| 30 |
+
#sc-wrap .sc-nav-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
|
| 31 |
+
#sc-wrap .sc-nav-logo img { height: 36px; width: 36px; border-radius: 50%; object-fit: cover; }
|
| 32 |
+
#sc-wrap .sc-nav-logo span { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-weight: 600; color: var(--dark); }
|
| 33 |
+
#sc-wrap .sc-nav-links { display: flex; align-items: center; gap: 32px; list-style: none; }
|
| 34 |
+
#sc-wrap .sc-nav-links a { text-decoration: none; color: var(--muted); font-size: 0.9rem; transition: color 0.2s; }
|
| 35 |
+
#sc-wrap .sc-nav-links a:hover { color: var(--rose); }
|
| 36 |
+
#sc-wrap .sc-nav-cta { background: var(--rose); color: white !important; padding: 9px 22px; border-radius: 100px; font-weight: 500 !important; }
|
| 37 |
+
#sc-wrap .sc-nav-cta:hover { background: var(--rose-dark) !important; }
|
| 38 |
+
/* HERO */
|
| 39 |
+
#sc-wrap .sc-hero {
|
| 40 |
+
display: flex; flex-direction: column; align-items: center;
|
| 41 |
+
text-align: center; padding: 80px 40px 60px;
|
| 42 |
+
background: var(--cream); position: relative;
|
| 43 |
+
}
|
| 44 |
+
#sc-wrap .sc-hero::before {
|
| 45 |
+
content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
|
| 46 |
+
width: 700px; height: 700px;
|
| 47 |
+
background: radial-gradient(circle, rgba(201,75,110,0.07) 0%, transparent 70%);
|
| 48 |
+
pointer-events: none; z-index: 0;
|
| 49 |
+
}
|
| 50 |
+
#sc-wrap .sc-hero > * { position: relative; z-index: 1; }
|
| 51 |
+
#sc-wrap .sc-eyebrow {
|
| 52 |
+
display: inline-flex; align-items: center; gap: 8px;
|
| 53 |
+
background: var(--rose-light); color: var(--rose-dark);
|
| 54 |
+
padding: 6px 18px; border-radius: 100px;
|
| 55 |
+
font-size: 0.78rem; font-weight: 500; letter-spacing: 1px; text-transform: uppercase;
|
| 56 |
+
margin-bottom: 28px;
|
| 57 |
+
}
|
| 58 |
+
#sc-wrap .sc-hero-logo {
|
| 59 |
+
width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin-bottom: 28px;
|
| 60 |
+
box-shadow: 0 0 0 8px rgba(201,75,110,0.1), 0 0 0 16px rgba(201,75,110,0.05);
|
| 61 |
+
}
|
| 62 |
+
#sc-wrap .sc-h1 {
|
| 63 |
+
font-family: 'Cormorant Garamond', serif; font-size: clamp(3rem,7vw,5.5rem);
|
| 64 |
+
font-weight: 300; line-height: 1.05; color: var(--dark); max-width: 800px;
|
| 65 |
+
}
|
| 66 |
+
#sc-wrap .sc-h1 em { font-style: italic; color: var(--rose); }
|
| 67 |
+
#sc-wrap .sc-sub {
|
| 68 |
+
margin-top: 20px; font-size: 1.05rem; color: var(--muted); font-weight: 300;
|
| 69 |
+
max-width: 500px; line-height: 1.7;
|
| 70 |
+
}
|
| 71 |
+
#sc-wrap .sc-actions { display: flex; gap: 14px; margin-top: 40px; flex-wrap: wrap; justify-content: center; }
|
| 72 |
+
#sc-wrap .sc-btn {
|
| 73 |
+
padding: 14px 36px; border-radius: 100px; font-size: 0.92rem;
|
| 74 |
+
font-weight: 500; text-decoration: none; cursor: pointer; border: none;
|
| 75 |
+
font-family: 'DM Sans', sans-serif; transition: all 0.2s; display: inline-block;
|
| 76 |
+
}
|
| 77 |
+
#sc-wrap .sc-btn-primary { background: var(--rose); color: white; box-shadow: 0 4px 20px rgba(201,75,110,0.3); }
|
| 78 |
+
#sc-wrap .sc-btn-primary:hover { background: var(--rose-dark); transform: translateY(-2px); }
|
| 79 |
+
#sc-wrap .sc-btn-secondary { background: transparent; color: var(--dark); border: 1px solid rgba(26,17,24,0.2); }
|
| 80 |
+
#sc-wrap .sc-btn-secondary:hover { border-color: var(--rose); color: var(--rose); transform: translateY(-2px); }
|
| 81 |
+
#sc-wrap .sc-trust {
|
| 82 |
+
margin-top: 48px; display: flex; align-items: center; gap: 20px;
|
| 83 |
+
color: var(--muted); font-size: 0.82rem; flex-wrap: wrap; justify-content: center;
|
| 84 |
+
}
|
| 85 |
+
#sc-wrap .sc-tdiv { width: 1px; height: 14px; background: var(--border); }
|
| 86 |
+
/* STATS */
|
| 87 |
+
#sc-wrap .sc-stats {
|
| 88 |
+
background: white; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
|
| 89 |
+
padding: 50px 60px;
|
| 90 |
+
}
|
| 91 |
+
#sc-wrap .sc-stats-grid {
|
| 92 |
+
max-width: 1100px; margin: 0 auto;
|
| 93 |
+
display: grid; grid-template-columns: repeat(4,1fr); gap: 32px; text-align: center;
|
| 94 |
+
}
|
| 95 |
+
#sc-wrap .sc-stat-num { font-family: 'Cormorant Garamond', serif; font-size: 2.8rem; font-weight: 300; color: var(--rose); line-height: 1; margin-bottom: 6px; }
|
| 96 |
+
#sc-wrap .sc-stat-label { font-size: 0.82rem; color: var(--muted); font-weight: 300; }
|
| 97 |
+
/* SECTIONS */
|
| 98 |
+
#sc-wrap .sc-section { padding: 80px 60px; max-width: 1100px; margin: 0 auto; }
|
| 99 |
+
#sc-wrap .sc-label { font-size: 0.75rem; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--rose); margin-bottom: 14px; }
|
| 100 |
+
#sc-wrap .sc-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(2rem,4vw,3rem); font-weight: 300; line-height: 1.15; color: var(--dark); max-width: 580px; }
|
| 101 |
+
#sc-wrap .sc-title em { font-style: italic; color: var(--rose); }
|
| 102 |
+
#sc-wrap .sc-intro { color: var(--muted); font-size: 0.92rem; margin-top: 14px; max-width: 520px; line-height: 1.7; font-weight: 300; }
|
| 103 |
+
/* HOW */
|
| 104 |
+
#sc-wrap .sc-how-grid {
|
| 105 |
+
display: grid; grid-template-columns: repeat(3,1fr); gap: 2px;
|
| 106 |
+
margin-top: 48px; background: var(--border); border: 1px solid var(--border);
|
| 107 |
+
border-radius: 20px; overflow: hidden;
|
| 108 |
+
}
|
| 109 |
+
#sc-wrap .sc-how-card { background: var(--cream); padding: 40px 36px; transition: background 0.3s; }
|
| 110 |
+
#sc-wrap .sc-how-card:hover { background: white; }
|
| 111 |
+
#sc-wrap .sc-how-num { font-family: 'Cormorant Garamond', serif; font-size: 2.8rem; font-weight: 300; color: var(--rose-light); line-height: 1; margin-bottom: 18px; }
|
| 112 |
+
#sc-wrap .sc-how-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-weight: 400; color: var(--dark); margin-bottom: 10px; }
|
| 113 |
+
#sc-wrap .sc-how-card p { font-size: 0.87rem; color: var(--muted); line-height: 1.7; font-weight: 300; }
|
| 114 |
+
/* FEATURES DARK */
|
| 115 |
+
#sc-wrap .sc-dark { background: var(--dark); padding: 80px 0; }
|
| 116 |
+
#sc-wrap .sc-dark-inner { max-width: 1100px; margin: 0 auto; padding: 0 60px; }
|
| 117 |
+
#sc-wrap .sc-dark .sc-label { color: var(--rose-light); }
|
| 118 |
+
#sc-wrap .sc-dark .sc-title { color: white; }
|
| 119 |
+
#sc-wrap .sc-dark .sc-intro { color: rgba(255,255,255,0.4); }
|
| 120 |
+
#sc-wrap .sc-feat-grid {
|
| 121 |
+
display: grid; grid-template-columns: repeat(2,1fr); gap: 1px;
|
| 122 |
+
margin-top: 48px; background: rgba(255,255,255,0.06);
|
| 123 |
+
border: 1px solid rgba(255,255,255,0.06); border-radius: 20px; overflow: hidden;
|
| 124 |
+
}
|
| 125 |
+
#sc-wrap .sc-feat-card { background: var(--dark-2); padding: 40px; transition: background 0.3s; }
|
| 126 |
+
#sc-wrap .sc-feat-card:hover { background: #381c32; }
|
| 127 |
+
#sc-wrap .sc-feat-icon { width: 44px; height: 44px; border-radius: 10px; background: rgba(201,75,110,0.15); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; font-size: 1.3rem; }
|
| 128 |
+
#sc-wrap .sc-feat-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-weight: 400; color: white; margin-bottom: 10px; }
|
| 129 |
+
#sc-wrap .sc-feat-card p { font-size: 0.87rem; color: rgba(255,255,255,0.45); line-height: 1.7; font-weight: 300; }
|
| 130 |
+
/* CHAT DEMO */
|
| 131 |
+
#sc-wrap .sc-demo-inner { max-width: 720px; margin: 0 auto; padding: 0 60px 80px; }
|
| 132 |
+
#sc-wrap .sc-demo-head { text-align: center; margin-bottom: 44px; }
|
| 133 |
+
#sc-wrap .sc-demo-head .sc-label { color: var(--rose-light); }
|
| 134 |
+
#sc-wrap .sc-demo-head .sc-title { color: white; max-width: 100%; text-align: center; }
|
| 135 |
+
#sc-wrap .sc-demo-sub { color: rgba(255,255,255,0.4); font-size: 0.9rem; margin-top: 10px; }
|
| 136 |
+
#sc-wrap .sc-chat { background: #1f1120; border: 1px solid rgba(201,75,110,0.2); border-radius: 20px; overflow: hidden; }
|
| 137 |
+
#sc-wrap .sc-chat-hdr { display: flex; align-items: center; gap: 12px; padding: 18px 24px; border-bottom: 1px solid rgba(255,255,255,0.06); }
|
| 138 |
+
#sc-wrap .sc-chat-av { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid var(--rose); }
|
| 139 |
+
#sc-wrap .sc-chat-name { font-weight: 500; color: white; font-size: 0.92rem; }
|
| 140 |
+
#sc-wrap .sc-chat-status { font-size: 0.75rem; color: #4ade80; margin-top: 2px; }
|
| 141 |
+
#sc-wrap .sc-chat-body { padding: 24px; display: flex; flex-direction: column; gap: 14px; min-height: 180px; max-height: 300px; overflow-y: auto; }
|
| 142 |
+
#sc-wrap .sc-msg { display: flex; }
|
| 143 |
+
#sc-wrap .sc-msg.ai { justify-content: flex-start; }
|
| 144 |
+
#sc-wrap .sc-msg.user { justify-content: flex-end; }
|
| 145 |
+
#sc-wrap .sc-bubble { padding: 12px 18px; border-radius: 16px; font-size: 0.88rem; line-height: 1.6; max-width: 82%; }
|
| 146 |
+
#sc-wrap .sc-msg.ai .sc-bubble { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.85); border-bottom-left-radius: 3px; }
|
| 147 |
+
#sc-wrap .sc-msg.user .sc-bubble { background: var(--rose); color: white; border-bottom-right-radius: 3px; }
|
| 148 |
+
#sc-wrap .sc-msg.typing .sc-bubble { color: rgba(255,255,255,0.35); font-style: italic; }
|
| 149 |
+
#sc-wrap .sc-suggs { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 24px; border-top: 1px solid rgba(255,255,255,0.06); }
|
| 150 |
+
#sc-wrap .sc-sugg {
|
| 151 |
+
background: rgba(201,75,110,0.1); border: 1px solid rgba(201,75,110,0.25);
|
| 152 |
+
color: rgba(255,255,255,0.7); padding: 8px 14px; border-radius: 100px;
|
| 153 |
+
font-size: 0.8rem; cursor: pointer; transition: background 0.2s;
|
| 154 |
+
font-family: 'DM Sans', sans-serif;
|
| 155 |
+
}
|
| 156 |
+
#sc-wrap .sc-sugg:hover { background: rgba(201,75,110,0.25); color: white; }
|
| 157 |
+
#sc-wrap .sc-sugg:disabled { opacity: 0.3; cursor: default; }
|
| 158 |
+
/* MODELS */
|
| 159 |
+
#sc-wrap .sc-models-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; margin-top: 48px; max-width: 750px; }
|
| 160 |
+
#sc-wrap .sc-model { border: 1px solid var(--border); border-radius: 18px; padding: 32px 28px; background: white; transition: all 0.2s; position: relative; overflow: hidden; }
|
| 161 |
+
#sc-wrap .sc-model::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--rose), #e8829a); }
|
| 162 |
+
#sc-wrap .sc-model:hover { border-color: rgba(201,75,110,0.3); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(201,75,110,0.1); }
|
| 163 |
+
#sc-wrap .sc-mtag { display: inline-block; font-size: 0.7rem; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--rose); background: var(--rose-light); padding: 3px 10px; border-radius: 100px; margin-bottom: 16px; }
|
| 164 |
+
#sc-wrap .sc-model h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 400; color: var(--dark); margin-bottom: 8px; }
|
| 165 |
+
#sc-wrap .sc-model p { font-size: 0.85rem; color: var(--muted); line-height: 1.7; font-weight: 300; margin-bottom: 20px; }
|
| 166 |
+
#sc-wrap .sc-mmeta { display: flex; flex-direction: column; gap: 5px; font-size: 0.78rem; color: var(--muted); padding-top: 18px; border-top: 1px solid var(--border); }
|
| 167 |
+
#sc-wrap .sc-mmeta span { display: flex; align-items: center; gap: 6px; }
|
| 168 |
+
#sc-wrap .sc-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--rose); flex-shrink: 0; }
|
| 169 |
+
/* TESTIMONIALS */
|
| 170 |
+
#sc-wrap .sc-testi-wrap { background: white; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 80px 0; }
|
| 171 |
+
#sc-wrap .sc-testi-inner { max-width: 1100px; margin: 0 auto; padding: 0 60px; }
|
| 172 |
+
#sc-wrap .sc-testi-head { text-align: center; margin-bottom: 48px; }
|
| 173 |
+
#sc-wrap .sc-testi-head .sc-title { max-width: 100%; text-align: center; }
|
| 174 |
+
#sc-wrap .sc-testi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
|
| 175 |
+
#sc-wrap .sc-tcard { border: 1px solid var(--border); border-radius: 18px; padding: 32px 28px; background: var(--cream); }
|
| 176 |
+
#sc-wrap .sc-tquote { font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; font-weight: 300; color: var(--dark); line-height: 1.6; font-style: italic; margin-bottom: 24px; }
|
| 177 |
+
#sc-wrap .sc-tquote::before { content: '"'; color: var(--rose); }
|
| 178 |
+
#sc-wrap .sc-tauthor { display: flex; align-items: center; gap: 12px; }
|
| 179 |
+
#sc-wrap .sc-tav { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 0.95rem; flex-shrink: 0; }
|
| 180 |
+
#sc-wrap .sc-taname { font-weight: 500; font-size: 0.88rem; color: var(--dark); }
|
| 181 |
+
#sc-wrap .sc-taloc { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
|
| 182 |
+
/* FAQ */
|
| 183 |
+
#sc-wrap .sc-faq { margin-top: 48px; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; }
|
| 184 |
+
#sc-wrap .sc-fitem { background: white; padding: 24px 32px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background 0.2s; }
|
| 185 |
+
#sc-wrap .sc-fitem:last-child { border-bottom: none; }
|
| 186 |
+
#sc-wrap .sc-fitem:hover { background: var(--cream); }
|
| 187 |
+
#sc-wrap .sc-fq { font-weight: 500; color: var(--dark); font-size: 0.95rem; display: flex; justify-content: space-between; align-items: center; }
|
| 188 |
+
#sc-wrap .sc-farrow { color: var(--rose); transition: transform 0.3s; }
|
| 189 |
+
#sc-wrap .sc-fitem.open .sc-farrow { transform: rotate(180deg); }
|
| 190 |
+
#sc-wrap .sc-fa { display: none; margin-top: 14px; font-size: 0.87rem; color: var(--muted); line-height: 1.75; font-weight: 300; }
|
| 191 |
+
#sc-wrap .sc-fitem.open .sc-fa { display: block; }
|
| 192 |
+
/* CTA */
|
| 193 |
+
#sc-wrap .sc-cta { text-align: center; padding: 100px 60px; max-width: 780px; margin: 0 auto; }
|
| 194 |
+
#sc-wrap .sc-cta h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(2.2rem,5vw,3.6rem); font-weight: 300; line-height: 1.1; margin-bottom: 18px; color: var(--dark); }
|
| 195 |
+
#sc-wrap .sc-cta h2 em { font-style: italic; color: var(--rose); }
|
| 196 |
+
#sc-wrap .sc-cta p { color: var(--muted); font-size: 1rem; font-weight: 300; margin-bottom: 40px; line-height: 1.7; }
|
| 197 |
+
#sc-wrap .sc-eform { display: flex; gap: 10px; max-width: 460px; margin: 0 auto; }
|
| 198 |
+
#sc-wrap .sc-eform input { flex: 1; padding: 14px 22px; border: 1px solid rgba(26,17,24,0.15); border-radius: 100px; font-size: 0.88rem; font-family: 'DM Sans', sans-serif; background: white; color: var(--dark); outline: none; transition: border-color 0.2s; }
|
| 199 |
+
#sc-wrap .sc-eform input:focus { border-color: var(--rose); }
|
| 200 |
+
#sc-wrap .sc-eform input::placeholder { color: var(--muted); }
|
| 201 |
+
#sc-wrap .sc-success { display: none; margin-top: 18px; color: var(--rose); font-size: 0.92rem; }
|
| 202 |
+
/* FOOTER */
|
| 203 |
+
#sc-wrap .sc-footer { background: var(--dark); color: rgba(255,255,255,0.4); padding: 40px 60px; display: flex; align-items: center; justify-content: space-between; font-size: 0.82rem; font-weight: 300; flex-wrap: wrap; gap: 16px; }
|
| 204 |
+
#sc-wrap .sc-footer a { color: rgba(255,255,255,0.4); text-decoration: none; }
|
| 205 |
+
#sc-wrap .sc-footer a:hover { color: var(--rose-light); }
|
| 206 |
+
#sc-wrap .sc-flogo { display: flex; align-items: center; gap: 10px; color: white; font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; }
|
| 207 |
+
#sc-wrap .sc-flogo img { height: 26px; width: 26px; border-radius: 50%; object-fit: cover; }
|
| 208 |
+
</style>
|
| 209 |
+
</head>
|
| 210 |
+
<body>
|
| 211 |
+
<div id="sc-wrap">
|
| 212 |
+
<!-- NAV -->
|
| 213 |
+
<div class="sc-nav">
|
| 214 |
+
<a href="https://huggingface.co/SpiceeChat" target="_blank" class="sc-nav-logo">
|
| 215 |
+
<img src="https://huggingface.co/spaces/SpiceeChat/README/resolve/main/SpiceeChat_org_logo.png" alt="SpiceeChat">
|
| 216 |
+
<span>SpiceeChat</span>
|
| 217 |
+
</a>
|
| 218 |
+
<ul class="sc-nav-links">
|
| 219 |
+
<li><a href="#sc-how">How it works</a></li>
|
| 220 |
+
<li><a href="#sc-demo">Meet Cinder</a></li>
|
| 221 |
+
<li><a href="#sc-models">Models</a></li>
|
| 222 |
+
<li><a href="#sc-waitlist" class="sc-nav-cta">Join Waitlist</a></li>
|
| 223 |
+
</ul>
|
| 224 |
+
</div>
|
| 225 |
+
<!-- HERO -->
|
| 226 |
+
<div class="sc-hero">
|
| 227 |
+
<div class="sc-eyebrow">✦ AI-Powered Dating Intelligence</div>
|
| 228 |
+
<img class="sc-hero-logo" src="https://huggingface.co/spaces/SpiceeChat/README/resolve/main/SpiceeChat_org_logo.png" alt="SpiceeChat">
|
| 229 |
+
<h1 class="sc-h1">Love, finally <em>understood</em></h1>
|
| 230 |
+
<p class="sc-sub">SpiceeChat uses machine learning to end dating fatigue — smarter matching, real conversations, genuine connection. No swiping, no algorithms optimised for your screen time.</p>
|
| 231 |
+
<div class="sc-actions">
|
| 232 |
+
<a href="#sc-waitlist" class="sc-btn sc-btn-primary">Get Early Access</a>
|
| 233 |
+
<a href="#sc-how" class="sc-btn sc-btn-secondary">See how it works</a>
|
| 234 |
+
</div>
|
| 235 |
+
<div class="sc-trust">
|
| 236 |
+
<span>Open Source on Hugging Face</span>
|
| 237 |
+
<div class="sc-tdiv"></div>
|
| 238 |
+
<span>Apache 2.0 License</span>
|
| 239 |
+
<div class="sc-tdiv"></div>
|
| 240 |
+
<span>No ads. Ever.</span>
|
| 241 |
+
</div>
|
| 242 |
+
</div>
|
| 243 |
+
<!-- STATS -->
|
| 244 |
+
<div class="sc-stats">
|
| 245 |
+
<div class="sc-stats-grid">
|
| 246 |
+
<div><div class="sc-stat-num">118k+</div><div class="sc-stat-label">Dating profiles analyzed</div></div>
|
| 247 |
+
<div><div class="sc-stat-num">2</div><div class="sc-stat-label">AI models in production</div></div>
|
| 248 |
+
<div><div class="sc-stat-num">1.5B</div><div class="sc-stat-label">Parameters (Cinder model)</div></div>
|
| 249 |
+
<div><div class="sc-stat-num">100%</div><div class="sc-stat-label">Open source & transparent</div></div>
|
| 250 |
+
</div>
|
| 251 |
+
</div>
|
| 252 |
+
<!-- HOW IT WORKS -->
|
| 253 |
+
<div id="sc-how" class="sc-section">
|
| 254 |
+
<div class="sc-label">How it works</div>
|
| 255 |
+
<h2 class="sc-title">Three steps to <em>better</em> love</h2>
|
| 256 |
+
<p class="sc-intro">Dating apps have been broken for years. We're fixing that with AI that actually understands people — not just their photos.</p>
|
| 257 |
+
<div class="sc-how-grid">
|
| 258 |
+
<div class="sc-how-card">
|
| 259 |
+
<div class="sc-how-num">01</div>
|
| 260 |
+
<h3>Share your story</h3>
|
| 261 |
+
<p>Tell us who you are, what you value, and what you're really looking for. No checkboxes, no forced categories — just a real conversation. Our AI listens to what you say, not what a dropdown menu forced you to pick.</p>
|
| 262 |
+
</div>
|
| 263 |
+
<div class="sc-how-card">
|
| 264 |
+
<div class="sc-how-num">02</div>
|
| 265 |
+
<h3>AI reads the signals</h3>
|
| 266 |
+
<p>Bio2Tags extracts deep personality signals from what people write — interests, values, communication style, emotional maturity. We build a picture of who someone truly is, not just who they claim to be in a photo.</p>
|
| 267 |
+
</div>
|
| 268 |
+
<div class="sc-how-card">
|
| 269 |
+
<div class="sc-how-num">03</div>
|
| 270 |
+
<h3>Meet who matters</h3>
|
| 271 |
+
<p>Cinder, your personal AI companion, guides every step — from first message anxiety to navigating a third date, from heartbreak recovery to understanding what you actually need in a partner.</p>
|
| 272 |
+
</div>
|
| 273 |
+
</div>
|
| 274 |
+
</div>
|
| 275 |
+
<!-- FEATURES -->
|
| 276 |
+
<div class="sc-dark" id="sc-features">
|
| 277 |
+
<div class="sc-dark-inner">
|
| 278 |
+
<div class="sc-label">Features</div>
|
| 279 |
+
<h2 class="sc-title" style="color:white;">Built for <em>real</em> humans</h2>
|
| 280 |
+
<p class="sc-intro">Every feature exists to solve a real problem — not to keep you scrolling.</p>
|
| 281 |
+
<div class="sc-feat-grid">
|
| 282 |
+
<div class="sc-feat-card">
|
| 283 |
+
<div class="sc-feat-icon">🧠</div>
|
| 284 |
+
<h3>Personality Intelligence</h3>
|
| 285 |
+
<p>Bio2Tags reads bios the way a perceptive friend would — picking up on tone, values, and what someone's not saying. Clean, structured tags that actually mean something for compatibility.</p>
|
| 286 |
+
</div>
|
| 287 |
+
<div class="sc-feat-card">
|
| 288 |
+
<div class="sc-feat-icon">💬</div>
|
| 289 |
+
<h3>Cinder AI Companion</h3>
|
| 290 |
+
<p>Available at 2am when you're spiralling about a text left on read. Cinder is empathetic, honest, and grounded in real relationship psychology. No clichés, no toxic positivity.</p>
|
| 291 |
+
</div>
|
| 292 |
+
<div class="sc-feat-card">
|
| 293 |
+
<div class="sc-feat-icon">🔒</div>
|
| 294 |
+
<h3>Privacy by Design</h3>
|
| 295 |
+
<p>Your data stays yours. We don't sell it, we don't profile you for advertisers, and we don't share anything with third parties. Dating is already vulnerable enough.</p>
|
| 296 |
+
</div>
|
| 297 |
+
<div class="sc-feat-card">
|
| 298 |
+
<div class="sc-feat-icon">⚡</div>
|
| 299 |
+
<h3>Open Weights, Always</h3>
|
| 300 |
+
<p>Every model is released on Hugging Face under Apache 2.0. Download, audit, fine-tune, and deploy yourself. No black boxes, no lock-in, no trust-me-bro AI.</p>
|
| 301 |
+
</div>
|
| 302 |
+
</div>
|
| 303 |
+
</div>
|
| 304 |
+
</div>
|
| 305 |
+
<!-- CHAT DEMO -->
|
| 306 |
+
<div class="sc-dark" id="sc-demo">
|
| 307 |
+
<div class="sc-demo-inner">
|
| 308 |
+
<div class="sc-demo-head">
|
| 309 |
+
<div class="sc-label" style="color:var(--rose-light);">Meet Cinder</div>
|
| 310 |
+
<h2 class="sc-title" style="color:white; max-width:100%; text-align:center;">Your companion for <em>love</em></h2>
|
| 311 |
+
<p class="sc-demo-sub">Tap a question to see Cinder in action.</p>
|
| 312 |
+
</div>
|
| 313 |
+
<div class="sc-chat">
|
| 314 |
+
<div class="sc-chat-hdr">
|
| 315 |
+
<img src="https://huggingface.co/spaces/SpiceeChat/README/resolve/main/SpiceeChat_org_logo.png" alt="Cinder" class="sc-chat-av">
|
| 316 |
+
<div>
|
| 317 |
+
<div class="sc-chat-name">Cinder</div>
|
| 318 |
+
<div class="sc-chat-status">● Online</div>
|
| 319 |
+
</div>
|
| 320 |
+
</div>
|
| 321 |
+
<div class="sc-chat-body" id="sc-chat-body">
|
| 322 |
+
<div class="sc-msg ai"><div class="sc-bubble">Hey! I'm Cinder — your companion for all things love and dating. What's on your heart today?</div></div>
|
| 323 |
+
</div>
|
| 324 |
+
<div class="sc-suggs">
|
| 325 |
+
<button class="sc-sugg" onclick="scSend(this)" data-reply="That's a lot to carry. Grief after a long relationship is completely real — it's not weakness, it's love that doesn't have anywhere to go yet. Give yourself permission to feel it without rushing to 'get over it'. Start small — rediscover one thing that was just yours. Not revenge glow-ups, not dating apps immediately. Just you, reconnecting with yourself first. 💙">I just got out of a 3-year relationship 💔</button>
|
| 326 |
+
<button class="sc-sugg" onclick="scSend(this)" data-reply="Photos first — use 3-5 that show you actually doing things you love, not posed headshots. Then your bio: skip 'I love to travel and laugh' (everyone does) and say something specific. 'Terrible at cooking but excellent at finding the best takeout in any city' tells me more about you than a paragraph of generic adjectives. Be specific, be honest, and don't be afraid to be a little weird — the right person will love it.">How do I make my profile stand out? ✨</button>
|
| 327 |
+
<button class="sc-sugg" onclick="scSend(this)" data-reply="Workplace crushes — classic, complicated, and not automatically a bad idea. Key question: could you handle it professionally if it didn't work out? If you're in different departments, the risk is lower. My advice: get to know them naturally first. If the feeling grows and seems mutual, a low-pressure coffee is a perfectly fine next step. Just don't let it live rent-free in your head for six months. 😄">I have a crush on my coworker 😬</button>
|
| 328 |
+
<button class="sc-sugg" onclick="scSend(this)" data-reply="The biggest one? Expecting your partner to just know what you need without telling them. People aren't mind readers, and assuming they should be leads to quiet resentment that builds over months. The second one is losing yourself — merging your identity so completely that you forget what you actually liked before them. Healthy relationships are two whole people choosing each other. Keep your friendships, your interests, your ambitions.">Biggest mistakes in new relationships?</button>
|
| 329 |
+
</div>
|
| 330 |
+
</div>
|
| 331 |
+
</div>
|
| 332 |
+
</div>
|
| 333 |
+
<!-- MODELS -->
|
| 334 |
+
<div id="sc-models" class="sc-section">
|
| 335 |
+
<div class="sc-label">Our Models</div>
|
| 336 |
+
<h2 class="sc-title">The <em>intelligence</em> behind SpiceeChat</h2>
|
| 337 |
+
<p class="sc-intro">Every model is open source, openly trained, and built with a single purpose — to help real people form real connections.</p>
|
| 338 |
+
<div class="sc-models-grid">
|
| 339 |
+
<div class="sc-model">
|
| 340 |
+
<div class="sc-mtag">Flagship</div>
|
| 341 |
+
<h3>Cinder 1.5B</h3>
|
| 342 |
+
<p>Your AI companion for all things dating and relationships. Trained on 118k+ real dating profiles. Empathetic, grounded, never preachy.</p>
|
| 343 |
+
<div class="sc-mmeta">
|
| 344 |
+
<span><div class="sc-dot"></div>1.5B parameters</span>
|
| 345 |
+
<span><div class="sc-dot"></div>Qwen2.5 base · QLoRA fine-tuned</span>
|
| 346 |
+
<span><div class="sc-dot"></div>Apache 2.0</span>
|
| 347 |
+
</div>
|
| 348 |
+
</div>
|
| 349 |
+
<div class="sc-model">
|
| 350 |
+
<div class="sc-mtag">Utility</div>
|
| 351 |
+
<h3>Bio2Tags</h3>
|
| 352 |
+
<p>Transforms any biography into structured personality tags in milliseconds. The backbone of smart matching — who someone is matters more than how they look.</p>
|
| 353 |
+
<div class="sc-mmeta">
|
| 354 |
+
<span><div class="sc-dot"></div>360M parameters</span>
|
| 355 |
+
<span><div class="sc-dot"></div>SmolLM2 base · 1,387 curated pairs</span>
|
| 356 |
+
<span><div class="sc-dot"></div>Apache 2.0</span>
|
| 357 |
+
</div>
|
| 358 |
+
</div>
|
| 359 |
+
</div>
|
| 360 |
+
</div>
|
| 361 |
+
<!-- TESTIMONIALS -->
|
| 362 |
+
<div class="sc-testi-wrap">
|
| 363 |
+
<div class="sc-testi-inner">
|
| 364 |
+
<div class="sc-testi-head">
|
| 365 |
+
<div class="sc-label">What people say</div>
|
| 366 |
+
<h2 class="sc-title">Real people. <em>Real</em> results.</h2>
|
| 367 |
+
</div>
|
| 368 |
+
<div class="sc-testi-grid">
|
| 369 |
+
<div class="sc-tcard">
|
| 370 |
+
<div class="sc-tquote">I've used every dating app out there. SpiceeChat is the first thing that felt like it actually understood what I was looking for — not just what I was swiping on.</div>
|
| 371 |
+
<div class="sc-tauthor">
|
| 372 |
+
<div class="sc-tav" style="background:#f4d0db; color:#a03358;">S</div>
|
| 373 |
+
<div><div class="sc-taname">Sofia R.</div><div class="sc-taloc">London, UK</div></div>
|
| 374 |
+
</div>
|
| 375 |
+
</div>
|
| 376 |
+
<div class="sc-tcard">
|
| 377 |
+
<div class="sc-tquote">Cinder helped me realize I was looking for the wrong things in relationships entirely. That one conversation changed how I approach dating.</div>
|
| 378 |
+
<div class="sc-tauthor">
|
| 379 |
+
<div class="sc-tav" style="background:#e8d5f0; color:#6a2d8f;">M</div>
|
| 380 |
+
<div><div class="sc-taname">Marcus T.</div><div class="sc-taloc">Toronto, CA</div></div>
|
| 381 |
+
</div>
|
| 382 |
+
</div>
|
| 383 |
+
<div class="sc-tcard">
|
| 384 |
+
<div class="sc-tquote">The Bio2Tags model described my personality from my bio better than I ever could. Finally, a platform that gets nuance instead of flattening everyone into five categories.</div>
|
| 385 |
+
<div class="sc-tauthor">
|
| 386 |
+
<div class="sc-tav" style="background:#d0e8f4; color:#1a6a8f;">A</div>
|
| 387 |
+
<div><div class="sc-taname">Aisha K.</div><div class="sc-taloc">Dubai, UAE</div></div>
|
| 388 |
+
</div>
|
| 389 |
+
</div>
|
| 390 |
+
</div>
|
| 391 |
+
</div>
|
| 392 |
+
</div>
|
| 393 |
+
<!-- FAQ -->
|
| 394 |
+
<div class="sc-section" id="sc-faq">
|
| 395 |
+
<div class="sc-label">FAQ</div>
|
| 396 |
+
<h2 class="sc-title">Questions we <em>actually</em> get asked</h2>
|
| 397 |
+
<div class="sc-faq">
|
| 398 |
+
<div class="sc-fitem" onclick="scFaq(this)">
|
| 399 |
+
<div class="sc-fq">Is SpiceeChat actually free? <span class="sc-farrow">↓</span></div>
|
| 400 |
+
<div class="sc-fa">Yes. Our models are open source under Apache 2.0 — free to use, study, and build on. The platform is in early access. No hidden fees, no paywalls on core features.</div>
|
| 401 |
+
</div>
|
| 402 |
+
<div class="sc-fitem" onclick="scFaq(this)">
|
| 403 |
+
<div class="sc-fq">How is this different from a regular dating app? <span class="sc-farrow">↓</span></div>
|
| 404 |
+
<div class="sc-fa">Most dating apps optimise for screen time, not connection. SpiceeChat uses machine learning to understand personality, values, and communication style. Cinder helps you navigate relationships, not just collect matches.</div>
|
| 405 |
+
</div>
|
| 406 |
+
<div class="sc-fitem" onclick="scFaq(this)">
|
| 407 |
+
<div class="sc-fq">What does Cinder actually do? <span class="sc-farrow">↓</span></div>
|
| 408 |
+
<div class="sc-fa">Cinder is your personal AI relationship companion. She helps you understand what you want, gives real advice on dating situations, helps you recover from heartbreak, and supports you through everything in between — like the friend who always has time and never gets tired of your situationship updates.</div>
|
| 409 |
+
</div>
|
| 410 |
+
<div class="sc-fitem" onclick="scFaq(this)">
|
| 411 |
+
<div class="sc-fq">Is my data private? <span class="sc-farrow">↓</span></div>
|
| 412 |
+
<div class="sc-fa">Completely. We don't sell your data, we don't show ads, and we don't share anything with third parties. Dating is already vulnerable enough — your data shouldn't be too.</div>
|
| 413 |
+
</div>
|
| 414 |
+
<div class="sc-fitem" onclick="scFaq(this)">
|
| 415 |
+
<div class="sc-fq">Can I use the models in my own app? <span class="sc-farrow">↓</span></div>
|
| 416 |
+
<div class="sc-fa">Yes — all models are Apache 2.0 and on Hugging Face. Cinder 1.5B and Bio2Tags are free to download, fine-tune, and deploy commercially. We believe in open AI, not walled gardens.</div>
|
| 417 |
+
</div>
|
| 418 |
+
</div>
|
| 419 |
+
</div>
|
| 420 |
+
<!-- CTA -->
|
| 421 |
+
<div id="sc-waitlist">
|
| 422 |
+
<div class="sc-cta">
|
| 423 |
+
<h2>Ready to find something <em>real?</em></h2>
|
| 424 |
+
<p>Join the waitlist. Be among the first to experience dating intelligence that actually works — and actually cares about you finding what you're looking for.</p>
|
| 425 |
+
<div class="sc-eform">
|
| 426 |
+
<input type="email" id="sc-email" placeholder="your@email.com">
|
| 427 |
+
<button class="sc-btn sc-btn-primary" onclick="scSignup()">Join</button>
|
| 428 |
+
</div>
|
| 429 |
+
<div class="sc-success" id="sc-success">✦ You're on the list. We'll be in touch soon.</div>
|
| 430 |
+
</div>
|
| 431 |
+
</div>
|
| 432 |
+
<!-- FOOTER -->
|
| 433 |
+
<div class="sc-footer">
|
| 434 |
+
<div class="sc-flogo">
|
| 435 |
+
<img src="https://huggingface.co/spaces/SpiceeChat/README/resolve/main/SpiceeChat_org_logo.png" alt="SpiceeChat">
|
| 436 |
+
SpiceeChat
|
| 437 |
+
</div>
|
| 438 |
+
<div>
|
| 439 |
+
<a href="https://huggingface.co/SpiceeChat" target="_blank">Hugging Face</a>
|
| 440 |
+
·
|
| 441 |
+
<a href="https://dating-fatigue.com" target="_blank">dating-fatigue.com</a>
|
| 442 |
+
·
|
| 443 |
+
Apache 2.0 License
|
| 444 |
+
</div>
|
| 445 |
+
<div>© 2026 SpiceeChat</div>
|
| 446 |
+
</div>
|
| 447 |
+
</div>
|
| 448 |
+
<script>
|
| 449 |
+
function scSend(btn) {
|
| 450 |
+
var reply = btn.getAttribute('data-reply');
|
| 451 |
+
var question = btn.textContent.trim();
|
| 452 |
+
var btns = document.querySelectorAll('.sc-sugg');
|
| 453 |
+
btns.forEach(function(b) { b.disabled = true; });
|
| 454 |
+
var body = document.getElementById('sc-chat-body');
|
| 455 |
+
var uMsg = document.createElement('div');
|
| 456 |
+
uMsg.className = 'sc-msg user';
|
| 457 |
+
uMsg.innerHTML = '<div class="sc-bubble">' + question + '</div>';
|
| 458 |
+
body.appendChild(uMsg);
|
| 459 |
+
var typing = document.createElement('div');
|
| 460 |
+
typing.className = 'sc-msg ai typing';
|
| 461 |
+
typing.innerHTML = '<div class="sc-bubble">Cinder is typing...</div>';
|
| 462 |
+
body.appendChild(typing);
|
| 463 |
+
body.scrollTop = body.scrollHeight;
|
| 464 |
+
setTimeout(function() {
|
| 465 |
+
body.removeChild(typing);
|
| 466 |
+
var aMsg = document.createElement('div');
|
| 467 |
+
aMsg.className = 'sc-msg ai';
|
| 468 |
+
aMsg.innerHTML = '<div class="sc-bubble">' + reply + '</div>';
|
| 469 |
+
body.appendChild(aMsg);
|
| 470 |
+
body.scrollTop = body.scrollHeight;
|
| 471 |
+
setTimeout(function() {
|
| 472 |
+
btns.forEach(function(b) { b.disabled = false; });
|
| 473 |
+
}, 1000);
|
| 474 |
+
}, 1500);
|
| 475 |
+
}
|
| 476 |
+
function scSignup() {
|
| 477 |
+
var input = document.getElementById('sc-email');
|
| 478 |
+
var msg = document.getElementById('sc-success');
|
| 479 |
+
if (input.value && input.value.indexOf('@') > -1) {
|
| 480 |
+
input.disabled = true; input.style.opacity = '0.4';
|
| 481 |
+
document.querySelector('.sc-eform button').disabled = true;
|
| 482 |
+
document.querySelector('.sc-eform button').style.opacity = '0.4';
|
| 483 |
+
msg.style.display = 'block';
|
| 484 |
+
} else {
|
| 485 |
+
input.style.borderColor = '#c94b6e';
|
| 486 |
+
setTimeout(function() { input.style.borderColor = ''; }, 1500);
|
| 487 |
+
}
|
| 488 |
+
}
|
| 489 |
+
function scFaq(el) {
|
| 490 |
+
var isOpen = el.classList.contains('open');
|
| 491 |
+
document.querySelectorAll('.sc-fitem').forEach(function(f) { f.classList.remove('open'); });
|
| 492 |
+
if (!isOpen) el.classList.add('open');
|
| 493 |
+
}
|
| 494 |
+
</script>
|
| 495 |
+
</body>
|
| 496 |
+
</html>
|
| 497 |
+
"""
|
| 498 |
+
|
| 499 |
+
# Write the HTML to a static file
|
| 500 |
+
STATIC_DIR = "/app/static"
|
| 501 |
+
|
| 502 |
+
os.makedirs(STATIC_DIR, exist_ok=True)
|
| 503 |
+
|
| 504 |
+
with open(os.path.join(STATIC_DIR, "index.html"), "w", encoding="utf-8") as f:
|
| 505 |
+
f.write(HTML_CONTENT)
|
| 506 |
+
|
| 507 |
+
PORT = int(os.environ.get("PORT", 7860))
|
| 508 |
+
|
| 509 |
+
class Handler(http.server.SimpleHTTPRequestHandler):
|
| 510 |
+
extensions_map = http.server.SimpleHTTPRequestHandler.extensions_map.copy()
|
| 511 |
+
extensions_map.update({
|
| 512 |
+
".html": "text/html; charset=utf-8",
|
| 513 |
+
})
|
| 514 |
+
|
| 515 |
+
def end_headers(self):
|
| 516 |
+
self.send_header("Content-Type", "text/html; charset=utf-8")
|
| 517 |
+
super().end_headers()
|
| 518 |
+
|
| 519 |
+
def __init__(self, *args, **kwargs):
|
| 520 |
+
super().__init__(*args, directory=STATIC_DIR, **kwargs)
|
| 521 |
+
|
| 522 |
+
with socketserver.TCPServer(("0.0.0.0", PORT), Handler) as httpd:
|
| 523 |
+
print(f"SpiceeChat is live on port {PORT}")
|
| 524 |
+
httpd.serve_forever()
|