Spaces:
Running
Running
Update app.py
Browse files
app.py
CHANGED
|
@@ -1,253 +1,253 @@
|
|
| 1 |
-
import gradio as gr
|
| 2 |
-
import os
|
| 3 |
-
import glob
|
| 4 |
-
import base64
|
| 5 |
-
import mimetypes
|
| 6 |
-
import random
|
| 7 |
-
from datetime import datetime, timezone
|
| 8 |
-
from time import sleep
|
| 9 |
-
|
| 10 |
-
from huggingface_hub import HfApi
|
| 11 |
-
import threading
|
| 12 |
-
import requests
|
| 13 |
-
from bs4 import BeautifulSoup
|
| 14 |
-
api = HfApi()
|
| 15 |
-
|
| 16 |
-
screenshots = []
|
| 17 |
-
screenshots_folder = "screenshots"
|
| 18 |
-
|
| 19 |
-
def load_screenshots():
|
| 20 |
-
global screenshots
|
| 21 |
-
for filename in os.listdir(screenshots_folder):
|
| 22 |
-
file_path = os.path.join(screenshots_folder, filename)
|
| 23 |
-
name_part = os.path.splitext(filename)[0]
|
| 24 |
-
# Split on the first hyphen to separate owner/repo
|
| 25 |
-
parts = name_part.split("---", 1)
|
| 26 |
-
if len(parts) == 2 and parts[0] and parts[1]:
|
| 27 |
-
username = parts[0]
|
| 28 |
-
spacename = parts[1]
|
| 29 |
-
link = f"https://huggingface.co/spaces/{username}/{spacename}"
|
| 30 |
-
try:
|
| 31 |
-
space_info = api.space_info(f"{username}/{spacename}")
|
| 32 |
-
print(f"Link: {link}", space_info.likes, space_info.created_at, space_info.card_data.title, space_info.card_data.get("short_description", ""))
|
| 33 |
-
screenshots.append({"link": link, "username": username, "spacename": spacename, "image": f"https://huggingface.co/spaces/Arial311/DeepSite-Gallery/resolve/main/screenshots/{filename}"})
|
| 34 |
-
except Exception as e:
|
| 35 |
-
print(f"### No space found", filename, e)
|
| 36 |
-
os.remove(file_path)
|
| 37 |
-
continue
|
| 38 |
-
|
| 39 |
-
load_screenshots()
|
| 40 |
-
|
| 41 |
-
def get_user_link(username):
|
| 42 |
-
hf_user_link = f"https://huggingface.co/{username}"
|
| 43 |
-
try:
|
| 44 |
-
response = requests.get(hf_user_link)
|
| 45 |
-
if response.status_code == 200:
|
| 46 |
-
soup = BeautifulSoup(response.text, "html.parser")
|
| 47 |
-
nofollow_link_tag = soup.find('a', attrs={'rel': 'nofollow'})
|
| 48 |
-
if nofollow_link_tag:
|
| 49 |
-
first_nofollow_link = nofollow_link_tag.get('href')
|
| 50 |
-
return first_nofollow_link
|
| 51 |
-
except Exception as e:
|
| 52 |
-
print(f"### User link error", username, e)
|
| 53 |
-
return hf_user_link
|
| 54 |
-
|
| 55 |
-
def update_screenshot_info():
|
| 56 |
-
print("--- Updating Screenshots Meta ---")
|
| 57 |
-
global screenshots
|
| 58 |
-
new_screenshots = screenshots.copy()
|
| 59 |
-
color_list = ["blue", "green", "red", "yellow", "purple", "pink", "indigo", "teal", "cyan"]
|
| 60 |
-
for i, screenshot in enumerate(new_screenshots):
|
| 61 |
-
try:
|
| 62 |
-
space_info = api.space_info(f"{screenshot['username']}/{screenshot['spacename']}")
|
| 63 |
-
user_info = api.get_user_overview(space_info.author)
|
| 64 |
-
user_link = get_user_link(space_info.author)
|
| 65 |
-
avatar_url = user_info.avatar_url if user_info.avatar_url.startswith("http") else "https://huggingface.co" + user_info.avatar_url
|
| 66 |
-
|
| 67 |
-
new_screenshots[i].update({
|
| 68 |
-
"likeCount": f"{space_info.likes}",
|
| 69 |
-
"date": space_info.created_at.strftime("%Y-%m-%d"),
|
| 70 |
-
"title": space_info.card_data.title if space_info.card_data.title else screenshot["spacename"],
|
| 71 |
-
"description": space_info.card_data.get("short_description", ""),
|
| 72 |
-
"user": user_info.fullname,
|
| 73 |
-
"user_avatar": avatar_url,
|
| 74 |
-
"user_link": user_link,
|
| 75 |
-
"color": color_list[i % len(color_list)],
|
| 76 |
-
"rate": space_info.likes / (datetime.now(timezone.utc) - space_info.created_at).total_seconds()
|
| 77 |
-
})
|
| 78 |
-
print("Updated:", new_screenshots[i]["user"], new_screenshots[i]["user_link"])
|
| 79 |
-
except Exception as e:
|
| 80 |
-
print(f"### No space found during update", screenshot, e)
|
| 81 |
-
continue
|
| 82 |
-
|
| 83 |
-
screenshots = sorted(new_screenshots, key=lambda x: x.get("rate", 0), reverse=True)
|
| 84 |
-
print("--- Updating Screenshots Meta Done ---")
|
| 85 |
-
|
| 86 |
-
update_screenshot_info()
|
| 87 |
-
|
| 88 |
-
def update_screenshots():
|
| 89 |
-
while True:
|
| 90 |
-
sleep(600)
|
| 91 |
-
update_screenshot_info()
|
| 92 |
-
|
| 93 |
-
update_screenshots_thread = threading.Thread(target=update_screenshots, daemon=True)
|
| 94 |
-
update_screenshots_thread.start()
|
| 95 |
-
|
| 96 |
-
head_html = """
|
| 97 |
-
<script src="https://cdn.tailwindcss.com"></script>
|
| 98 |
-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
| 99 |
-
<link rel="preconnect" href="https://fonts.googleapis.com">
|
| 100 |
-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
| 101 |
-
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap" rel="stylesheet">
|
| 102 |
-
|
| 103 |
-
<style>
|
| 104 |
-
body, .gradio-container {
|
| 105 |
-
font-family: 'Fira Code', monospace !important;
|
| 106 |
-
background: linear-gradient(135deg, #0a0a1a 0%, #0d1128 100%) !important;
|
| 107 |
-
}
|
| 108 |
-
footer {visibility: hidden}
|
| 109 |
-
@keyframes scanline { 0% { background-position: 0 0; } 100% { background-position: 0 100vh; } }
|
| 110 |
-
@keyframes glitch { 0%{text-shadow:.05em 0 0 #00fffc,-.05em -.025em 0 #fc00ff}14%{text-shadow:.05em 0 0 #00fffc,-.05em -.025em 0 #fc00ff}15%{text-shadow:-.05em -.025em 0 #00fffc,.025em .025em 0 #fc00ff}49%{text-shadow:-.05em -.025em 0 #00fffc,.025em .025em 0 #fc00ff}50%{text-shadow:.025em .05em 0 #00fffc,.05em 0 0 #fc00ff}99%{text-shadow:.025em .05em 0 #00fffc,.05em 0 0 #fc00ff}100%{text-shadow:-.025em 0 0 #00fffc,-.025em -.025em 0 #fc00ff} }
|
| 111 |
-
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }
|
| 112 |
-
@keyframes circuit { 0% { stroke-dashoffset: 1000; } 100% { stroke-dashoffset: 0; } }
|
| 113 |
-
.like-animation { animation: pulse 0.5s ease-in-out; }
|
| 114 |
-
.holo-card { transition: all 0.3s ease; box-shadow: 0 0 20px rgba(0, 255, 252, 0.3); border: 1px solid rgba(0, 255, 252, 0.2); background: rgba(5, 5, 15, 0.75) !important; backdrop-filter: blur(10px); position: relative; overflow: hidden; border-radius: 16px; }
|
| 115 |
-
.holo-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 0 30px rgba(0, 255, 252, 0.6), 0 0 50px rgba(255, 0, 255, 0.4); border-color: rgba(255, 0, 255, 0.6); }
|
| 116 |
-
.holo-card:hover .card-image { transform: scale(1.05); }
|
| 117 |
-
.card-image { transition: transform 0.5s ease; }
|
| 118 |
-
.header-glow { color: #00fffc; text-shadow: 0 0 5px #00fffc, 0 0 10px #00fffc, 0 0 20px #00fffc; animation: glitch 3s infinite; }
|
| 119 |
-
.grid-overlay { background-image: linear-gradient(rgba(0, 255, 252, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 252, 0.1) 1px, transparent 1px); background-size: 50px 50px; }
|
| 120 |
-
.circuit-border { position: absolute; top: 0; left: 0; width: 100%; height: 100%; stroke: rgba(0, 255, 252, 0.3); stroke-width: 2; stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: circuit 10s linear infinite; fill: none; pointer-events: none; }
|
| 121 |
-
|
| 122 |
-
/* --- Custom text-color-300 styles for used colors --- */
|
| 123 |
-
.text-blue-300 { color: #93c5fd !important; }
|
| 124 |
-
.text-green-300 { color: #86efac !important; }
|
| 125 |
-
.text-red-300 { color: #fca5a5 !important; }
|
| 126 |
-
.text-yellow-300 { color: #fde68a !important; }
|
| 127 |
-
.text-purple-300 { color: #c4b5fd !important; }
|
| 128 |
-
.text-pink-300 { color: #f9a8d4 !important; }
|
| 129 |
-
.text-indigo-300 { color: #a5b4fc !important; }
|
| 130 |
-
.text-teal-300 { color: #5eead4 !important; }
|
| 131 |
-
.text-cyan-300 { color: #67e8f9 !important; }
|
| 132 |
-
.text-gray-300 { color: #d1d5db !important; }
|
| 133 |
-
.text-red-500 { color: #ef4444 !important; }
|
| 134 |
-
</style>
|
| 135 |
-
"""
|
| 136 |
-
|
| 137 |
-
def generate_gallery_html():
|
| 138 |
-
"""Scans the screenshots folder and generates the HTML for the image cards."""
|
| 139 |
-
print("--- Refreshing Screenshots Gallery ---")
|
| 140 |
-
|
| 141 |
-
global screenshots
|
| 142 |
-
gallery_html = ""
|
| 143 |
-
for screenshot in screenshots:
|
| 144 |
-
color = screenshot.get("color", "blue")
|
| 145 |
-
gallery_html += f"""
|
| 146 |
-
<div class="holo-card rounded-xl overflow-hidden">
|
| 147 |
-
<div class="relative overflow-hidden">
|
| 148 |
-
<a href="{screenshot["link"]}" target="_blank" rel="noopener noreferrer" class="z-20">
|
| 149 |
-
<img src="{screenshot["image"]}" alt="{screenshot["title"]}" class="w-full h-full object-cover card-image" style="object-fit: cover !important;" loading="lazy" decoding="async">
|
| 150 |
-
</a>
|
| 151 |
-
<div class="absolute top-4 right-4 bg-black/70 rounded-full px-3 py-1 flex items-center text-xs border text-{color}-300/30">
|
| 152 |
-
<i class="fas fa-calendar-alt text-{color}-300 mr-2"></i>
|
| 153 |
-
<span>{screenshot["date"]}</span>
|
| 154 |
-
</div>
|
| 155 |
-
</div>
|
| 156 |
-
<div class="p-5 relative z-10">
|
| 157 |
-
<div class="flex justify-between items-center mb-3">
|
| 158 |
-
<h3 class="text-xl font-semibold text-{color}-300 truncate" title="{screenshot["title"]}">{screenshot["title"]}</h3>
|
| 159 |
-
<button class="like-btn bg-transparent border-none cursor-pointer transition-transform flex items-center gap-2 group" onclick="likePost(this)">
|
| 160 |
-
<i class="fas fa-heart text-red-500"></i>
|
| 161 |
-
<span class="like-count text-sm text-gray-300">{screenshot["likeCount"]}</span>
|
| 162 |
-
</button>
|
| 163 |
-
</div>
|
| 164 |
-
<p class="text-gray-300 mb-4 text-sm">{screenshot["description"]}</p>
|
| 165 |
-
<div class="flex justify-between items-center text-xs">
|
| 166 |
-
<div class="flex items-center gap-2 text-{color}-300">
|
| 167 |
-
<img src="{screenshot["user_avatar"]}" alt="avatar" class="w-6 h-6 rounded-full border border-{color}-300" style="display:inline-block;">
|
| 168 |
-
<a href="{screenshot["user_link"]}" target="_blank" rel="noopener noreferrer" class="font-semibold text-{color}-300 hover:underline">Forged by {screenshot["user"]}</a>
|
| 169 |
-
</div>
|
| 170 |
-
</div>
|
| 171 |
-
</div>
|
| 172 |
-
<svg class="circuit-border" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0,0 L100,0 L100,100 L0,100 Z" /></svg>
|
| 173 |
-
</div>
|
| 174 |
-
"""
|
| 175 |
-
return gallery_html
|
| 176 |
-
|
| 177 |
-
|
| 178 |
-
# --- GRADIO APP DEFINITION ---
|
| 179 |
-
# The main HTML structure of the page, with a placeholder for our dynamic gallery.
|
| 180 |
-
main_html_template = """
|
| 181 |
-
<body class="min-h-screen text-white relative overflow-x-hidden">
|
| 182 |
-
<!--div class="absolute inset-0 -z-10 overflow-hidden">
|
| 183 |
-
<div class="absolute inset-0 grid-overlay opacity-40" style="animation: scanline 15s linear infinite; mix-blend-mode: overlay;"></div>
|
| 184 |
-
<div class="absolute inset-0 opacity-20" style="background: radial-gradient(circle at 20% 30%, rgba(150, 0, 200, 0.6), transparent 30%), radial-gradient(circle at 80% 70%, rgba(0, 150, 200, 0.6), transparent 30%);"></div>
|
| 185 |
-
</div-->
|
| 186 |
-
|
| 187 |
-
<div class="relative">
|
| 188 |
-
<div class="container mx-auto px-4 py-8">
|
| 189 |
-
<header class="text-center mb-12">
|
| 190 |
-
<div class="relative inline-block">
|
| 191 |
-
<h1 class="text-5xl md:text-7xl font-bold mb-4 header-glow tracking-widest">DeepSite Gallery</h1>
|
| 192 |
-
<p class="text-center text-lg text-blue-300/80 mb-10 mx-auto">
|
| 193 |
-
</div>
|
| 194 |
-
|
| 195 |
-
<!-- --- HEADER ENHANCEMENT ---
|
| 196 |
-
<div class="flex flex-wrap justify-center items-center gap-4">
|
| 197 |
-
<div class="flex items-center gap-2 bg-black/50 border border-blue-500/50 rounded-full px-4 py-2 text-sm hover:bg-blue-900/50 hover:shadow-[0_0_15px_rgba(0,150,255,0.6)] transition-all duration-300">
|
| 198 |
-
<i class="fas fa-trophy text-yellow-300"></i>
|
| 199 |
-
<span class="font-bold text-gray-200">Featured Streams</span>
|
| 200 |
-
<span class="text-xs bg-yellow-400/20 text-yellow-300 rounded-full px-2 py-0.5">16</span>
|
| 201 |
-
</div>
|
| 202 |
-
<div class="flex items-center gap-2 bg-black/50 border border-purple-500/50 rounded-full px-4 py-2 text-sm hover:bg-purple-900/50 hover:shadow-[0_0_15px_rgba(200,50,255,0.6)] transition-all duration-300">
|
| 203 |
-
<i class="fas fa-fire text-orange-400"></i>
|
| 204 |
-
<span class="font-bold text-gray-200">Trending Now</span>
|
| 205 |
-
<span class="text-xs bg-orange-400/20 text-orange-300 rounded-full px-2 py-0.5">99+</span>
|
| 206 |
-
</div>
|
| 207 |
-
<div class="flex items-center gap-2 bg-black/50 border border-green-500/50 rounded-full px-4 py-2 text-sm hover:bg-green-900/50 hover:shadow-[0_0_15px_rgba(50,255,150,0.6)] transition-all duration-300">
|
| 208 |
-
<i class="fas fa-bolt text-green-300"></i>
|
| 209 |
-
<span class="font-bold text-gray-200">New Arrivals</span>
|
| 210 |
-
<span class="text-xs bg-green-400/20 text-green-300 rounded-full px-2 py-0.5 animate-pulse">LIVE</span>
|
| 211 |
-
</div>
|
| 212 |
-
</div>-->
|
| 213 |
-
</header>
|
| 214 |
-
|
| 215 |
-
<!-- DYNAMIC GALLERY WILL BE INSERTED HERE BY GRADIO -->
|
| 216 |
-
<div id="gallery" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
|
| 217 |
-
{gallery_placeholder}
|
| 218 |
-
</div>
|
| 219 |
-
</div>
|
| 220 |
-
</div>
|
| 221 |
-
|
| 222 |
-
<!-- JAVASCRIPT FOR INTERACTIVITY -->
|
| 223 |
-
<script>
|
| 224 |
-
function likePost(button) {{
|
| 225 |
-
if (button.classList.contains('liked')) return; // Prevent multiple clicks
|
| 226 |
-
button.classList.add('like-animation', 'liked');
|
| 227 |
-
const countSpan = button.querySelector('.like-count');
|
| 228 |
-
let currentCount = parseInt(countSpan.textContent, 10);
|
| 229 |
-
countSpan.textContent = currentCount + 1;
|
| 230 |
-
setTimeout(() => {{ button.classList.remove('like-animation'); }}, 500);
|
| 231 |
-
}}
|
| 232 |
-
</script>
|
| 233 |
-
</body>
|
| 234 |
-
"""
|
| 235 |
-
|
| 236 |
-
# The function that Gradio will call to update the UI
|
| 237 |
-
def update_ui():
|
| 238 |
-
gallery_content = generate_gallery_html()
|
| 239 |
-
return main_html_template.format(gallery_placeholder=gallery_content)
|
| 240 |
-
|
| 241 |
-
with gr.Blocks(head=head_html, fill_height=True, theme=gr.themes.Base()) as demo:
|
| 242 |
-
# We only need one component to render the entire page
|
| 243 |
-
main_page = gr.HTML()
|
| 244 |
-
|
| 245 |
-
# Timer to refresh the content
|
| 246 |
-
#timer = gr.Timer(5) # Refresh every 5 seconds
|
| 247 |
-
#timer.tick(fn=update_ui, inputs=None, outputs=main_page)
|
| 248 |
-
|
| 249 |
-
# Load the content when the app starts
|
| 250 |
-
demo.load(fn=update_ui, inputs=None, outputs=main_page)
|
| 251 |
-
|
| 252 |
-
if __name__ == "__main__":
|
| 253 |
demo.launch()
|
|
|
|
| 1 |
+
import gradio as gr
|
| 2 |
+
import os
|
| 3 |
+
import glob
|
| 4 |
+
import base64
|
| 5 |
+
import mimetypes
|
| 6 |
+
import random
|
| 7 |
+
from datetime import datetime, timezone
|
| 8 |
+
from time import sleep
|
| 9 |
+
|
| 10 |
+
from huggingface_hub import HfApi
|
| 11 |
+
import threading
|
| 12 |
+
import requests
|
| 13 |
+
from bs4 import BeautifulSoup
|
| 14 |
+
api = HfApi()
|
| 15 |
+
|
| 16 |
+
screenshots = []
|
| 17 |
+
screenshots_folder = "screenshots"
|
| 18 |
+
|
| 19 |
+
def load_screenshots():
|
| 20 |
+
global screenshots
|
| 21 |
+
for filename in os.listdir(screenshots_folder):
|
| 22 |
+
file_path = os.path.join(screenshots_folder, filename)
|
| 23 |
+
name_part = os.path.splitext(filename)[0]
|
| 24 |
+
# Split on the first hyphen to separate owner/repo
|
| 25 |
+
parts = name_part.split("---", 1)
|
| 26 |
+
if len(parts) == 2 and parts[0] and parts[1]:
|
| 27 |
+
username = parts[0]
|
| 28 |
+
spacename = parts[1]
|
| 29 |
+
link = f"https://huggingface.co/spaces/{username}/{spacename}"
|
| 30 |
+
try:
|
| 31 |
+
space_info = api.space_info(f"{username}/{spacename}")
|
| 32 |
+
print(f"Link: {link}", space_info.likes, space_info.created_at, space_info.card_data.title, space_info.card_data.get("short_description", ""))
|
| 33 |
+
screenshots.append({"link": link, "username": username, "spacename": spacename, "image": f"https://huggingface.co/spaces/Arial311/DeepSite-Gallery/resolve/main/screenshots/{filename}"})
|
| 34 |
+
except Exception as e:
|
| 35 |
+
print(f"### No space found", filename, e)
|
| 36 |
+
os.remove(file_path)
|
| 37 |
+
continue
|
| 38 |
+
|
| 39 |
+
load_screenshots()
|
| 40 |
+
|
| 41 |
+
def get_user_link(username):
|
| 42 |
+
hf_user_link = f"https://huggingface.co/{username}"
|
| 43 |
+
try:
|
| 44 |
+
response = requests.get(hf_user_link)
|
| 45 |
+
if response.status_code == 200:
|
| 46 |
+
soup = BeautifulSoup(response.text, "html.parser")
|
| 47 |
+
nofollow_link_tag = soup.find('a', attrs={'rel': 'nofollow'})
|
| 48 |
+
if nofollow_link_tag:
|
| 49 |
+
first_nofollow_link = nofollow_link_tag.get('href')
|
| 50 |
+
return first_nofollow_link
|
| 51 |
+
except Exception as e:
|
| 52 |
+
print(f"### User link error", username, e)
|
| 53 |
+
return hf_user_link
|
| 54 |
+
|
| 55 |
+
def update_screenshot_info():
|
| 56 |
+
print("--- Updating Screenshots Meta ---")
|
| 57 |
+
global screenshots
|
| 58 |
+
new_screenshots = screenshots.copy()
|
| 59 |
+
color_list = ["blue", "green", "red", "yellow", "purple", "pink", "indigo", "teal", "cyan"]
|
| 60 |
+
for i, screenshot in enumerate(new_screenshots):
|
| 61 |
+
try:
|
| 62 |
+
space_info = api.space_info(f"{screenshot['username']}/{screenshot['spacename']}")
|
| 63 |
+
user_info = api.get_user_overview(space_info.author)
|
| 64 |
+
user_link = get_user_link(space_info.author)
|
| 65 |
+
avatar_url = user_info.avatar_url if user_info.avatar_url.startswith("http") else "https://huggingface.co" + user_info.avatar_url
|
| 66 |
+
|
| 67 |
+
new_screenshots[i].update({
|
| 68 |
+
"likeCount": f"{space_info.likes}",
|
| 69 |
+
"date": space_info.created_at.strftime("%Y-%m-%d"),
|
| 70 |
+
"title": space_info.card_data.title if space_info.card_data.title else screenshot["spacename"],
|
| 71 |
+
"description": space_info.card_data.get("short_description", ""),
|
| 72 |
+
"user": user_info.fullname,
|
| 73 |
+
"user_avatar": avatar_url,
|
| 74 |
+
"user_link": user_link,
|
| 75 |
+
"color": color_list[i % len(color_list)],
|
| 76 |
+
"rate": space_info.likes / (datetime.now(timezone.utc) - space_info.created_at).total_seconds()
|
| 77 |
+
})
|
| 78 |
+
print("Updated:", new_screenshots[i]["user"], new_screenshots[i]["user_link"])
|
| 79 |
+
except Exception as e:
|
| 80 |
+
print(f"### No space found during update", screenshot, e)
|
| 81 |
+
continue
|
| 82 |
+
|
| 83 |
+
screenshots = sorted(new_screenshots, key=lambda x: x.get("rate", 0), reverse=True)
|
| 84 |
+
print("--- Updating Screenshots Meta Done ---")
|
| 85 |
+
|
| 86 |
+
update_screenshot_info()
|
| 87 |
+
|
| 88 |
+
def update_screenshots():
|
| 89 |
+
while True:
|
| 90 |
+
sleep(600)
|
| 91 |
+
update_screenshot_info()
|
| 92 |
+
|
| 93 |
+
update_screenshots_thread = threading.Thread(target=update_screenshots, daemon=True)
|
| 94 |
+
update_screenshots_thread.start()
|
| 95 |
+
|
| 96 |
+
head_html = """
|
| 97 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 98 |
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
| 99 |
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
| 100 |
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
| 101 |
+
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap" rel="stylesheet">
|
| 102 |
+
|
| 103 |
+
<style>
|
| 104 |
+
body, .gradio-container {
|
| 105 |
+
font-family: 'Fira Code', monospace !important;
|
| 106 |
+
background: linear-gradient(135deg, #0a0a1a 0%, #0d1128 100%) !important;
|
| 107 |
+
}
|
| 108 |
+
footer {visibility: hidden}
|
| 109 |
+
@keyframes scanline { 0% { background-position: 0 0; } 100% { background-position: 0 100vh; } }
|
| 110 |
+
@keyframes glitch { 0%{text-shadow:.05em 0 0 #00fffc,-.05em -.025em 0 #fc00ff}14%{text-shadow:.05em 0 0 #00fffc,-.05em -.025em 0 #fc00ff}15%{text-shadow:-.05em -.025em 0 #00fffc,.025em .025em 0 #fc00ff}49%{text-shadow:-.05em -.025em 0 #00fffc,.025em .025em 0 #fc00ff}50%{text-shadow:.025em .05em 0 #00fffc,.05em 0 0 #fc00ff}99%{text-shadow:.025em .05em 0 #00fffc,.05em 0 0 #fc00ff}100%{text-shadow:-.025em 0 0 #00fffc,-.025em -.025em 0 #fc00ff} }
|
| 111 |
+
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }
|
| 112 |
+
@keyframes circuit { 0% { stroke-dashoffset: 1000; } 100% { stroke-dashoffset: 0; } }
|
| 113 |
+
.like-animation { animation: pulse 0.5s ease-in-out; }
|
| 114 |
+
.holo-card { transition: all 0.3s ease; box-shadow: 0 0 20px rgba(0, 255, 252, 0.3); border: 1px solid rgba(0, 255, 252, 0.2); background: rgba(5, 5, 15, 0.75) !important; backdrop-filter: blur(10px); position: relative; overflow: hidden; border-radius: 16px; }
|
| 115 |
+
.holo-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 0 30px rgba(0, 255, 252, 0.6), 0 0 50px rgba(255, 0, 255, 0.4); border-color: rgba(255, 0, 255, 0.6); }
|
| 116 |
+
.holo-card:hover .card-image { transform: scale(1.05); }
|
| 117 |
+
.card-image { transition: transform 0.5s ease; }
|
| 118 |
+
.header-glow { color: #00fffc; text-shadow: 0 0 5px #00fffc, 0 0 10px #00fffc, 0 0 20px #00fffc; animation: glitch 3s infinite; }
|
| 119 |
+
.grid-overlay { background-image: linear-gradient(rgba(0, 255, 252, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 252, 0.1) 1px, transparent 1px); background-size: 50px 50px; }
|
| 120 |
+
.circuit-border { position: absolute; top: 0; left: 0; width: 100%; height: 100%; stroke: rgba(0, 255, 252, 0.3); stroke-width: 2; stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: circuit 10s linear infinite; fill: none; pointer-events: none; }
|
| 121 |
+
|
| 122 |
+
/* --- Custom text-color-300 styles for used colors --- */
|
| 123 |
+
.text-blue-300 { color: #93c5fd !important; }
|
| 124 |
+
.text-green-300 { color: #86efac !important; }
|
| 125 |
+
.text-red-300 { color: #fca5a5 !important; }
|
| 126 |
+
.text-yellow-300 { color: #fde68a !important; }
|
| 127 |
+
.text-purple-300 { color: #c4b5fd !important; }
|
| 128 |
+
.text-pink-300 { color: #f9a8d4 !important; }
|
| 129 |
+
.text-indigo-300 { color: #a5b4fc !important; }
|
| 130 |
+
.text-teal-300 { color: #5eead4 !important; }
|
| 131 |
+
.text-cyan-300 { color: #67e8f9 !important; }
|
| 132 |
+
.text-gray-300 { color: #d1d5db !important; }
|
| 133 |
+
.text-red-500 { color: #ef4444 !important; }
|
| 134 |
+
</style>
|
| 135 |
+
"""
|
| 136 |
+
|
| 137 |
+
def generate_gallery_html():
|
| 138 |
+
"""Scans the screenshots folder and generates the HTML for the image cards."""
|
| 139 |
+
print("--- Refreshing Screenshots Gallery ---")
|
| 140 |
+
|
| 141 |
+
global screenshots
|
| 142 |
+
gallery_html = ""
|
| 143 |
+
for screenshot in screenshots:
|
| 144 |
+
color = screenshot.get("color", "blue")
|
| 145 |
+
gallery_html += f"""
|
| 146 |
+
<div class="holo-card rounded-xl overflow-hidden">
|
| 147 |
+
<div class="relative overflow-hidden">
|
| 148 |
+
<a href="{screenshot["link"]}" target="_blank" rel="noopener noreferrer" class="z-20">
|
| 149 |
+
<img src="{screenshot["image"]}" alt="{screenshot["title"]}" class="w-full h-full object-cover card-image" style="object-fit: cover !important;" loading="lazy" decoding="async">
|
| 150 |
+
</a>
|
| 151 |
+
<div class="absolute top-4 right-4 bg-black/70 rounded-full px-3 py-1 flex items-center text-xs border text-{color}-300/30">
|
| 152 |
+
<i class="fas fa-calendar-alt text-{color}-300 mr-2"></i>
|
| 153 |
+
<span>{screenshot["date"]}</span>
|
| 154 |
+
</div>
|
| 155 |
+
</div>
|
| 156 |
+
<div class="p-5 relative z-10">
|
| 157 |
+
<div class="flex justify-between items-center mb-3">
|
| 158 |
+
<h3 class="text-xl font-semibold text-{color}-300 truncate" title="{screenshot["title"]}">{screenshot["title"]}</h3>
|
| 159 |
+
<button class="like-btn bg-transparent border-none cursor-pointer transition-transform flex items-center gap-2 group" onclick="likePost(this)">
|
| 160 |
+
<i class="fas fa-heart text-red-500"></i>
|
| 161 |
+
<span class="like-count text-sm text-gray-300">{screenshot["likeCount"]}</span>
|
| 162 |
+
</button>
|
| 163 |
+
</div>
|
| 164 |
+
<p class="text-gray-300 mb-4 text-sm">{screenshot["description"]}</p>
|
| 165 |
+
<div class="flex justify-between items-center text-xs">
|
| 166 |
+
<div class="flex items-center gap-2 text-{color}-300">
|
| 167 |
+
<img src="{screenshot["user_avatar"]}" alt="avatar" class="w-6 h-6 rounded-full border border-{color}-300" style="display:inline-block;">
|
| 168 |
+
<a href="{screenshot["user_link"]}" target="_blank" rel="noopener noreferrer" class="font-semibold text-{color}-300 hover:underline">Forged by {screenshot["user"]}</a>
|
| 169 |
+
</div>
|
| 170 |
+
</div>
|
| 171 |
+
</div>
|
| 172 |
+
<svg class="circuit-border" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0,0 L100,0 L100,100 L0,100 Z" /></svg>
|
| 173 |
+
</div>
|
| 174 |
+
"""
|
| 175 |
+
return gallery_html
|
| 176 |
+
|
| 177 |
+
|
| 178 |
+
# --- GRADIO APP DEFINITION ---
|
| 179 |
+
# The main HTML structure of the page, with a placeholder for our dynamic gallery.
|
| 180 |
+
main_html_template = """
|
| 181 |
+
<body class="min-h-screen text-white relative overflow-x-hidden">
|
| 182 |
+
<!--div class="absolute inset-0 -z-10 overflow-hidden">
|
| 183 |
+
<div class="absolute inset-0 grid-overlay opacity-40" style="animation: scanline 15s linear infinite; mix-blend-mode: overlay;"></div>
|
| 184 |
+
<div class="absolute inset-0 opacity-20" style="background: radial-gradient(circle at 20% 30%, rgba(150, 0, 200, 0.6), transparent 30%), radial-gradient(circle at 80% 70%, rgba(0, 150, 200, 0.6), transparent 30%);"></div>
|
| 185 |
+
</div-->
|
| 186 |
+
|
| 187 |
+
<div class="relative">
|
| 188 |
+
<div class="container mx-auto px-4 py-8">
|
| 189 |
+
<header class="text-center mb-12">
|
| 190 |
+
<div class="relative inline-block">
|
| 191 |
+
<h1 class="text-5xl md:text-7xl font-bold mb-4 header-glow tracking-widest">DeepSite Gallery</h1>
|
| 192 |
+
<p class="text-center text-lg text-blue-300/80 mb-10 mx-auto">Upload a screenshot to join: {{username}}---{{spacename}}.png (1200 x 800).</p>
|
| 193 |
+
</div>
|
| 194 |
+
|
| 195 |
+
<!-- --- HEADER ENHANCEMENT ---
|
| 196 |
+
<div class="flex flex-wrap justify-center items-center gap-4">
|
| 197 |
+
<div class="flex items-center gap-2 bg-black/50 border border-blue-500/50 rounded-full px-4 py-2 text-sm hover:bg-blue-900/50 hover:shadow-[0_0_15px_rgba(0,150,255,0.6)] transition-all duration-300">
|
| 198 |
+
<i class="fas fa-trophy text-yellow-300"></i>
|
| 199 |
+
<span class="font-bold text-gray-200">Featured Streams</span>
|
| 200 |
+
<span class="text-xs bg-yellow-400/20 text-yellow-300 rounded-full px-2 py-0.5">16</span>
|
| 201 |
+
</div>
|
| 202 |
+
<div class="flex items-center gap-2 bg-black/50 border border-purple-500/50 rounded-full px-4 py-2 text-sm hover:bg-purple-900/50 hover:shadow-[0_0_15px_rgba(200,50,255,0.6)] transition-all duration-300">
|
| 203 |
+
<i class="fas fa-fire text-orange-400"></i>
|
| 204 |
+
<span class="font-bold text-gray-200">Trending Now</span>
|
| 205 |
+
<span class="text-xs bg-orange-400/20 text-orange-300 rounded-full px-2 py-0.5">99+</span>
|
| 206 |
+
</div>
|
| 207 |
+
<div class="flex items-center gap-2 bg-black/50 border border-green-500/50 rounded-full px-4 py-2 text-sm hover:bg-green-900/50 hover:shadow-[0_0_15px_rgba(50,255,150,0.6)] transition-all duration-300">
|
| 208 |
+
<i class="fas fa-bolt text-green-300"></i>
|
| 209 |
+
<span class="font-bold text-gray-200">New Arrivals</span>
|
| 210 |
+
<span class="text-xs bg-green-400/20 text-green-300 rounded-full px-2 py-0.5 animate-pulse">LIVE</span>
|
| 211 |
+
</div>
|
| 212 |
+
</div>-->
|
| 213 |
+
</header>
|
| 214 |
+
|
| 215 |
+
<!-- DYNAMIC GALLERY WILL BE INSERTED HERE BY GRADIO -->
|
| 216 |
+
<div id="gallery" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
|
| 217 |
+
{gallery_placeholder}
|
| 218 |
+
</div>
|
| 219 |
+
</div>
|
| 220 |
+
</div>
|
| 221 |
+
|
| 222 |
+
<!-- JAVASCRIPT FOR INTERACTIVITY -->
|
| 223 |
+
<script>
|
| 224 |
+
function likePost(button) {{
|
| 225 |
+
if (button.classList.contains('liked')) return; // Prevent multiple clicks
|
| 226 |
+
button.classList.add('like-animation', 'liked');
|
| 227 |
+
const countSpan = button.querySelector('.like-count');
|
| 228 |
+
let currentCount = parseInt(countSpan.textContent, 10);
|
| 229 |
+
countSpan.textContent = currentCount + 1;
|
| 230 |
+
setTimeout(() => {{ button.classList.remove('like-animation'); }}, 500);
|
| 231 |
+
}}
|
| 232 |
+
</script>
|
| 233 |
+
</body>
|
| 234 |
+
"""
|
| 235 |
+
|
| 236 |
+
# The function that Gradio will call to update the UI
|
| 237 |
+
def update_ui():
|
| 238 |
+
gallery_content = generate_gallery_html()
|
| 239 |
+
return main_html_template.format(gallery_placeholder=gallery_content)
|
| 240 |
+
|
| 241 |
+
with gr.Blocks(head=head_html, fill_height=True, theme=gr.themes.Base()) as demo:
|
| 242 |
+
# We only need one component to render the entire page
|
| 243 |
+
main_page = gr.HTML()
|
| 244 |
+
|
| 245 |
+
# Timer to refresh the content
|
| 246 |
+
#timer = gr.Timer(5) # Refresh every 5 seconds
|
| 247 |
+
#timer.tick(fn=update_ui, inputs=None, outputs=main_page)
|
| 248 |
+
|
| 249 |
+
# Load the content when the app starts
|
| 250 |
+
demo.load(fn=update_ui, inputs=None, outputs=main_page)
|
| 251 |
+
|
| 252 |
+
if __name__ == "__main__":
|
| 253 |
demo.launch()
|