"""
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'{label}'
return f'''
'''
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'{submessage}
' if submessage else ""
return f'''
{emoji}
{message}
{sub_html}
'''
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'๐ฆ {repo_name}')
if files_processed:
parts.append(f'๐ {files_processed} files')
if total_characters:
parts.append(f'๐ {total_characters:,} chars')
if node_count:
parts.append(f'๐ต {node_count} nodes')
if edge_count:
parts.append(f'๐ {edge_count} edges')
if model_name:
parts.append(f'๐ค {model_name}')
if extra_info:
parts.append(f'{extra_info}')
return f'{"".join(parts)}
'
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'''
'''
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'''
'''
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'''
{emoji}
{title}
{subtitle}
'''
def make_footer() -> str:
"""Generate footer HTML.
Returns:
HTML string for footer
"""
return '''
'''