testing

app.py

@@ -0,0 +1,159 @@
+import gradio as gr
+import json
+import os
+from pathlib import Path
+
+def load_config():
+    """Load configuration from config.json"""
+    config_path = Path(__file__).parent / "config.json"
+    with open(config_path, 'r', encoding='utf-8') as f:
+        return json.load(f)
+
+def get_custom_css():
+    """Load custom CSS if available"""
+    css_path = Path(__file__).parent / "static" / "style.css"
+    if css_path.exists():
+        with open(css_path, 'r', encoding='utf-8') as f:
+            return f.read()
+    return ""
+
+def create_category_card(category):
+    """Create HTML for a category card"""
+    return f"""
+    <div class="category-card">
+        <div class="category-icon">{category['icon']}</div>
+        <h3>{category['name']}</h3>
+        <p>{category['description']}</p>
+    </div>
+    """
+
+def create_model_card(item, item_type="model"):
+    """Create HTML for a model or dataset card"""
+    tags_html = " ".join([f'<span class="tag">{tag}</span>' for tag in item.get('tags', [])])
+
+    links = []
+    if item.get('repo'):
+        links.append(f'<a href="https://huggingface.co/{item["repo"]}" target="_blank" class="card-link">🤗 View on HF</a>')
+    if item.get('demo_url'):
+        links.append(f'<a href="{item["demo_url"]}" target="_blank" class="card-link">🚀 Demo</a>')
+    if item.get('paper_url'):
+        links.append(f'<a href="{item["paper_url"]}" target="_blank" class="card-link">📄 Paper</a>')
+
+    links_html = " ".join(links)
+
+    size_info = f'<div class="card-size">{item["size"]}</div>' if item.get('size') else ''
+
+    return f"""
+    <div class="item-card">
+        <h3>{item['name']}</h3>
+        <p class="card-description">{item.get('description', '')}</p>
+        {size_info}
+        <div class="card-tags">{tags_html}</div>
+        <div class="card-links">{links_html}</div>
+    </div>
+    """
+
+def create_header(config):
+    """Create site header"""
+    site = config['site']
+    social_links = []
+
+    if site['social_links'].get('github'):
+        social_links.append(f'<a href="{site["social_links"]["github"]}" target="_blank">GitHub</a>')
+    if site['social_links'].get('twitter'):
+        social_links.append(f'<a href="{site["social_links"]["twitter"]}" target="_blank">Twitter</a>')
+    if site['social_links'].get('linkedin'):
+        social_links.append(f'<a href="{site["social_links"]["linkedin"]}" target="_blank">LinkedIn</a>')
+
+    social_html = " · ".join(social_links) if social_links else ""
+
+    return f"""
+    <div class="site-header">
+        <h1>{site['title']}</h1>
+        <p class="site-description">{site['description']}</p>
+        <p class="site-author">by {site['author']}</p>
+        <div class="social-links">{social_html}</div>
+    </div>
+    """
+
+def create_category_section(config, category_id):
+    """Create a section showing items from a specific category"""
+    models = [m for m in config.get('models', []) if m.get('category') == category_id]
+    datasets = [d for d in config.get('datasets', []) if d.get('category') == category_id]
+
+    html = "<div class='items-grid'>"
+
+    for model in models:
+        html += create_model_card(model, "model")
+
+    for dataset in datasets:
+        html += create_model_card(dataset, "dataset")
+
+    html += "</div>"
+
+    if not models and not datasets:
+        html = "<p class='no-items'>No items in this category yet.</p>"
+
+    return html
+
+def build_interface():
+    """Build the Gradio interface"""
+    config = load_config()
+    custom_css = get_custom_css()
+
+    with gr.Blocks(
+        title=config['site']['title'],
+        css=custom_css,
+        theme=gr.themes.Soft(primary_hue="indigo")
+    ) as demo:
+
+        # Header
+        gr.HTML(create_header(config))
+
+        # Categories Overview
+        gr.Markdown("## 📂 Categories", elem_classes="section-title")
+
+        categories_html = "<div class='categories-grid'>"
+        for category in config['categories']:
+            categories_html += create_category_card(category)
+        categories_html += "</div>"
+
+        gr.HTML(categories_html)
+
+        # Create tabs for each category
+        with gr.Tabs():
+            for category in config['categories']:
+                with gr.Tab(f"{category['icon']} {category['name']}"):
+                    gr.Markdown(f"### {category['description']}")
+                    category_html = create_category_section(config, category['id'])
+                    gr.HTML(category_html)
+
+            # All items tab
+            with gr.Tab("🌐 All Items"):
+                gr.Markdown("### All Models and Datasets")
+                all_html = "<div class='items-grid'>"
+
+                for model in config.get('models', []):
+                    all_html += create_model_card(model, "model")
+
+                for dataset in config.get('datasets', []):
+                    all_html += create_model_card(dataset, "dataset")
+
+                all_html += "</div>"
+                gr.HTML(all_html)
+
+        # Footer
+        gr.Markdown("""
+        ---
+        <div style="text-align: center; color: #666; padding: 20px;">
+            Built with <a href="https://github.com/marduk191/hf_site_builder" target="_blank">HF Site Builder</a> |
+            Powered by <a href="https://gradio.app" target="_blank">Gradio</a> &
+            <a href="https://huggingface.co/spaces" target="_blank">Hugging Face Spaces</a>
+        </div>
+        """)
+
+    return demo
+
+if __name__ == "__main__":
+    demo = build_interface()
+    demo.launch()

config.json

@@ -0,0 +1,61 @@
+{
+  "site": {
+    "title": "My AI Model Hub",
+    "description": "Explore my collection of AI models and datasets",
+    "author": "Your Name",
+    "theme_color": "#4F46E5",
+    "header_image": null,
+    "social_links": {
+      "github": "",
+      "twitter": "",
+      "linkedin": ""
+    }
+  },
+  "categories": [
+    {
+      "id": "nlp",
+      "name": "Natural Language Processing",
+      "icon": "💬",
+      "description": "Models for text understanding and generation"
+    },
+    {
+      "id": "vision",
+      "name": "Computer Vision",
+      "icon": "👁️",
+      "description": "Image and video processing models"
+    },
+    {
+      "id": "audio",
+      "name": "Audio Processing",
+      "icon": "🎵",
+      "description": "Speech and sound analysis models"
+    },
+    {
+      "id": "datasets",
+      "name": "Datasets",
+      "icon": "📊",
+      "description": "Curated datasets for training and evaluation"
+    }
+  ],
+  "models": [
+    {
+      "name": "Example Text Classifier",
+      "repo": "username/model-name",
+      "category": "nlp",
+      "description": "A fine-tuned model for text classification",
+      "tags": ["classification", "bert", "nlp"],
+      "demo_url": null,
+      "paper_url": null
+    }
+  ],
+  "datasets": [
+    {
+      "name": "Example Dataset",
+      "repo": "username/dataset-name",
+      "category": "datasets",
+      "description": "A curated dataset for specific tasks",
+      "tags": ["text", "classification"],
+      "size": "100K samples"
+    }
+  ]
+}

static/style.css

@@ -0,0 +1,269 @@
+/* Modern styling for HF Site Builder */
+
+:root {
+    --primary-color: #4F46E5;
+    --secondary-color: #7C3AED;
+    --accent-color: #EC4899;
+    --text-color: #1F2937;
+    --text-light: #6B7280;
+    --bg-color: #F9FAFB;
+    --card-bg: #FFFFFF;
+    --border-color: #E5E7EB;
+    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+/* Global Styles */
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+    color: var(--text-color);
+}
+
+/* Site Header */
+.site-header {
+    text-align: center;
+    padding: 3rem 2rem;
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+    color: white;
+    border-radius: 12px;
+    margin-bottom: 2rem;
+    box-shadow: var(--shadow-lg);
+}
+
+.site-header h1 {
+    font-size: 2.5rem;
+    font-weight: 800;
+    margin-bottom: 0.5rem;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.site-description {
+    font-size: 1.25rem;
+    margin-bottom: 0.5rem;
+    opacity: 0.95;
+}
+
+.site-author {
+    font-size: 1rem;
+    opacity: 0.85;
+    margin-bottom: 1rem;
+}
+
+.social-links {
+    margin-top: 1rem;
+}
+
+.social-links a {
+    color: white;
+    text-decoration: none;
+    margin: 0 0.5rem;
+    opacity: 0.9;
+    transition: opacity 0.2s;
+    font-weight: 500;
+}
+
+.social-links a:hover {
+    opacity: 1;
+    text-decoration: underline;
+}
+
+/* Section Titles */
+.section-title {
+    font-size: 1.75rem;
+    font-weight: 700;
+    margin-top: 2rem;
+    margin-bottom: 1.5rem;
+    color: var(--text-color);
+}
+
+/* Categories Grid */
+.categories-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 1.5rem;
+    margin: 2rem 0;
+}
+
+.category-card {
+    background: var(--card-bg);
+    border: 2px solid var(--border-color);
+    border-radius: 12px;
+    padding: 2rem;
+    text-align: center;
+    transition: all 0.3s ease;
+    box-shadow: var(--shadow);
+}
+
+.category-card:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--shadow-lg);
+    border-color: var(--primary-color);
+}
+
+.category-icon {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+}
+
+.category-card h3 {
+    font-size: 1.25rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+    color: var(--text-color);
+}
+
+.category-card p {
+    color: var(--text-light);
+    font-size: 0.95rem;
+    line-height: 1.5;
+}
+
+/* Items Grid */
+.items-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: 1.5rem;
+    margin: 2rem 0;
+}
+
+.item-card {
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    padding: 1.5rem;
+    transition: all 0.3s ease;
+    box-shadow: var(--shadow);
+    display: flex;
+    flex-direction: column;
+}
+
+.item-card:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--shadow-lg);
+    border-color: var(--primary-color);
+}
+
+.item-card h3 {
+    font-size: 1.25rem;
+    font-weight: 700;
+    margin-bottom: 0.75rem;
+    color: var(--text-color);
+}
+
+.card-description {
+    color: var(--text-light);
+    font-size: 0.95rem;
+    line-height: 1.6;
+    margin-bottom: 1rem;
+    flex-grow: 1;
+}
+
+.card-size {
+    display: inline-block;
+    background: var(--bg-color);
+    color: var(--text-light);
+    padding: 0.25rem 0.75rem;
+    border-radius: 6px;
+    font-size: 0.85rem;
+    font-weight: 600;
+    margin-bottom: 0.75rem;
+}
+
+.card-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+}
+
+.tag {
+    display: inline-block;
+    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+    color: white;
+    padding: 0.25rem 0.75rem;
+    border-radius: 6px;
+    font-size: 0.8rem;
+    font-weight: 600;
+}
+
+.card-links {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    margin-top: auto;
+    padding-top: 1rem;
+    border-top: 1px solid var(--border-color);
+}
+
+.card-link {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.5rem 1rem;
+    background: var(--primary-color);
+    color: white;
+    text-decoration: none;
+    border-radius: 8px;
+    font-size: 0.9rem;
+    font-weight: 600;
+    transition: all 0.2s ease;
+}
+
+.card-link:hover {
+    background: var(--secondary-color);
+    transform: scale(1.05);
+    text-decoration: none;
+}
+
+.no-items {
+    text-align: center;
+    color: var(--text-light);
+    font-size: 1.1rem;
+    padding: 3rem;
+    background: var(--bg-color);
+    border-radius: 8px;
+    margin: 2rem 0;
+}
+
+/* Tabs Styling */
+.tabs {
+    margin-top: 2rem;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .site-header h1 {
+        font-size: 2rem;
+    }
+
+    .site-description {
+        font-size: 1.1rem;
+    }
+
+    .categories-grid,
+    .items-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .category-card,
+    .item-card {
+        padding: 1.5rem;
+    }
+}
+
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+    width: 10px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--bg-color);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--primary-color);
+    border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--secondary-color);
+}