Spaces:
Sleeping
Sleeping
File size: 5,011 Bytes
21c534a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 |
"""
UI Components
Reusable UI components for the Gradio interface.
"""
from typing import Optional, Dict
def make_nav_bar(active_page: str) -> str:
"""Generate the top navigation bar HTML.
Args:
active_page: One of 'generate', 'explore', or 'settings'
Returns:
HTML string for the navigation bar
"""
links = [
("generate", "/", "🚀 Generate"),
("explore", "/explore", "🔍 Explore"),
("settings", "/settings", "⚙️ Settings"),
]
nav_links = ""
for page_id, href, label in links:
active_class = "active" if page_id == active_page else ""
nav_links += f'<a href="{href}" class="{active_class}">{label}</a>'
return f'''
<div class="top-nav-bar">
<div class="nav-links">
{nav_links}
</div>
</div>
'''
def make_loading_html(emoji: str, message: str, submessage: str = "") -> str:
"""Generate a loading animation HTML.
Args:
emoji: Emoji to display with animation
message: Main loading message
submessage: Optional sub-message
Returns:
HTML string for loading state
"""
sub_html = f'<p class="loading-submessage">{submessage}</p>' if submessage else ""
return f'''
<div class="loading-container">
<div class="loading-emoji">{emoji}</div>
<p class="loading-message">{message}</p>
{sub_html}
</div>
'''
def make_stats_bar(
repo_name: str = "",
files_processed: int = 0,
total_characters: int = 0,
model_name: str = "",
node_count: int = 0,
edge_count: int = 0,
extra_info: str = ""
) -> str:
"""Generate the stats bar HTML.
Args:
repo_name: Repository name
files_processed: Number of files processed
total_characters: Total characters analyzed
model_name: AI model used
node_count: Number of nodes in diagram
edge_count: Number of edges in diagram
extra_info: Additional information to display
Returns:
HTML string for stats bar
"""
parts = []
if repo_name:
parts.append(f'<span>📦 <strong>{repo_name}</strong></span>')
if files_processed:
parts.append(f'<span>📁 <strong>{files_processed}</strong> files</span>')
if total_characters:
parts.append(f'<span>📊 <strong>{total_characters:,}</strong> chars</span>')
if node_count:
parts.append(f'<span>🔵 <strong>{node_count}</strong> nodes</span>')
if edge_count:
parts.append(f'<span>🔗 <strong>{edge_count}</strong> edges</span>')
if model_name:
parts.append(f'<span>🤖 <strong>{model_name}</strong></span>')
if extra_info:
parts.append(f'<span>{extra_info}</span>')
return f'<div class="stats-bar">{"".join(parts)}</div>'
def make_error_html(message: str, emoji: str = "❌", link_href: str = "/", link_text: str = "← Try Again") -> str:
"""Generate error display HTML.
Args:
message: Error message to display
emoji: Emoji to show
link_href: Link destination
link_text: Link text
Returns:
HTML string for error display
"""
return f'''
<div class="error-container">
<div class="error-emoji">{emoji}</div>
<p class="error-message">{message}</p>
<a href="{link_href}" class="error-link">{link_text}</a>
</div>
'''
def make_empty_state_html(message: str = "No diagram yet.", link_href: str = "/", link_text: str = "Generate one →") -> str:
"""Generate empty state HTML.
Args:
message: Message to display
link_href: Link destination
link_text: Link text
Returns:
HTML string for empty state
"""
return f'''
<div style="display: flex; align-items: center; justify-content: center;
min-height: 500px; color: #9ca3af; font-size: 1.1rem;">
{message} <a href="{link_href}" style="margin-left: 0.5rem; color: #f97316;">{link_text}</a>
</div>
'''
def make_hero_section(
emoji: str = "🏗️",
title: str = "CodeAtlas",
subtitle: str = "Visualize any codebase architecture with AI"
) -> str:
"""Generate hero section HTML.
Args:
emoji: Main emoji
title: Title text
subtitle: Subtitle text
Returns:
HTML string for hero section
"""
return f'''
<div class="hero-section">
<div class="hero-emoji">{emoji}</div>
<h1 class="hero-title">{title}</h1>
<p class="hero-subtitle">{subtitle}</p>
</div>
'''
def make_footer() -> str:
"""Generate footer HTML.
Returns:
HTML string for footer
"""
return '''
<div class="footer">
Built for MCP's 1st Birthday Hackathon 🎂 ·
</div>
'''
|