Folder

app.py

@@ -1,200 +1,17 @@
-import os
-import json
-import time
-import pandas as pd  # Included as requested
-from flask import Flask, render_template, request, redirect, url_for, session, flash
-from huggingface_hub import HfApi, hf_hub_download
-from huggingface_hub.utils import EntryNotFoundError, RepositoryNotFoundError, RevisionNotFoundError
-from werkzeug.security import generate_password_hash, check_password_hash
-from threading import Lock
-from dotenv import load_dotenv
-
-# Load local .env file if present (Good for local testing)
-load_dotenv()
-
-app = Flask(__name__)
-app.secret_key = os.environ.get("SECRET_KEY", "super_secret_key_123")
-
-# --- CONFIGURATION (WITH AUTO-FIX) ---
-# We use .strip() here to automatically remove invisible spaces 
-# that often happen when pasting into Space Settings.
-token_env = os.environ.get("HF_TOKEN")
-HF_TOKEN = token_env.strip() if token_env else None
-
-repo_env = os.environ.get("DB_REPO")
-DB_REPO = repo_env.strip() if repo_env else None
-
-DB_FILE = "db.json"
-
-# Print to logs so you can verify exactly what the app sees
-print(f"--- SYSTEM CONFIG ---")
-print(f"Target Repo: '{DB_REPO}'")
-print(f"Token Found: {'Yes' if HF_TOKEN else 'NO (Check Secrets!)'}")
-print(f"---------------------")
-
-# Initialize API
-if HF_TOKEN:
-    api = HfApi(token=HF_TOKEN)
-else:
-    api = None
-    print("WARNING: No HF_TOKEN found. App is strictly Read-Only and may crash on save.")
-
-db_lock = Lock()
-
-# --- STARTER DATA ---
-DEFAULT_PINS = [
-    {"id": 1, "url": "https://images.unsplash.com/photo-1541963463532-d68292c34b19", "caption": "Nature Vibes", "author": "System"},
-    {"id": 2, "url": "https://images.unsplash.com/photo-1493246507139-91e8fad9978e", "caption": "Alpine Lake", "author": "System"},
-    {"id": 3, "url": "https://images.unsplash.com/photo-1511497584788-876760111969", "caption": "Forest Mist", "author": "System"},
-    {"id": 4, "url": "https://images.unsplash.com/photo-1682687982501-1e58ab814714", "caption": "Desert Life", "author": "System"},
-    {"id": 5, "url": "https://images.unsplash.com/photo-1472214103451-9374bd1c798e", "caption": "Green Valley", "author": "System"}
-]
-
+# --- REPLACEMENT FOR load_db FUNCTION ---
 def load_db():
-    """
-    Tries to download the DB. If it fails because the file doesn't exist yet,
-    it returns the default data so the app can start (and save it later).
-    """
+    # 1. Check if variables are set
     if not HF_TOKEN or not DB_REPO:
-        print("WARNING: HF_TOKEN or DB_REPO secrets are missing. Site is Read-Only.")
-        return {"users": {}, "pins": DEFAULT_PINS}
+        print("ERROR: HF_TOKEN or DB_REPO secrets are missing!")
+        return {"users": {}, "pins": []}
 
     try:
-        print(f"Attempting to download {DB_FILE} from {DB_REPO}...")
+        # 2. Try to download existing DB
         path = hf_hub_download(repo_id=DB_REPO, filename=DB_FILE, repo_type="dataset", token=HF_TOKEN)
-        
         with open(path, 'r') as f:
-            data = json.load(f)
-            # Ensure structure exists
-            if 'pins' not in data: data['pins'] = DEFAULT_PINS
-            if 'users' not in data: data['users'] = {}
-            print("Database loaded successfully.")
-            return data
-            
-    except (EntryNotFoundError, RepositoryNotFoundError, RevisionNotFoundError) as e:
-        print(f"NOTE: Could not load {DB_FILE}. Reason: {e}")
-        print("Initializing with default data (Normal for first run).")
-        return {"users": {}, "pins": DEFAULT_PINS}
-        
+            return json.load(f)
     except Exception as e:
-        print(f"CRITICAL: Unknown DB Load Error: {e}")
-        return {"users": {}, "pins": DEFAULT_PINS}
-
-def save_db(data):
-    """
-    Saves the DB locally and then pushes to Hugging Face.
-    """
-    if not HF_TOKEN or not DB_REPO:
-        flash("Error: Cannot save. Secrets (HF_TOKEN/DB_REPO) are missing!")
-        return False
-
-    with db_lock:
-        try:
-            # 1. Save locally
-            with open(DB_FILE, 'w') as f:
-                json.dump(data, f, indent=2)
-            
-            # 2. Push to Hugging Face Dataset
-            if api:
-                print("Syncing to Hugging Face Dataset...")
-                api.upload_file(
-                    path_or_fileobj=DB_FILE,
-                    path_in_repo=DB_FILE,
-                    repo_id=DB_REPO,
-                    repo_type="dataset",
-                    commit_message="Sync DB via App"
-                )
-                print("Sync successful!")
-                return True
-            else:
-                flash("Error: API not initialized (Missing Token)")
-                return False
-            
-        except Exception as e:
-            print(f"Sync Error: {e}")
-            flash(f"Database Sync Failed: {str(e)}")
-            return False
-
-# Load data on startup
-DATA_CACHE = load_db()
-
-# --- ROUTES ---
-@app.route('/')
-def index():
-    return render_template('index.html', pins=DATA_CACHE.get('pins', []), user=session.get('user'))
-
-@app.route('/signup', methods=['POST'])
-def signup():
-    username = request.form.get('username')
-    password = request.form.get('password')
-    
-    if not username or not password:
-        flash("Username and password required")
-        return redirect(url_for('index'))
-    
-    # 1. Check if user exists
-    if username in DATA_CACHE.get('users', {}):
-        flash("User already exists!")
-        return redirect(url_for('index'))
-
-    # 2. Add user
-    DATA_CACHE.setdefault('users', {})[username] = generate_password_hash(password)
-    
-    # 3. Save to DB
-    success = save_db(DATA_CACHE)
-    if success:
-        session['user'] = username
-        flash("Account created successfully!")
-    else:
-        # Revert change if save failed
-        del DATA_CACHE['users'][username]
-    
-    return redirect(url_for('index'))
-
-@app.route('/login', methods=['POST'])
-def login():
-    username = request.form.get('username')
-    password = request.form.get('password')
-    users = DATA_CACHE.get('users', {})
-    
-    if username in users and check_password_hash(users[username], password):
-        session['user'] = username
-        flash("Logged in!")
-    else:
-        # Debug helper: Print what we checked against
-        print(f"Login Failed for {username}. Available users: {list(users.keys())}")
-        flash("Invalid username or password")
-    
-    return redirect(url_for('index'))
-
-@app.route('/logout')
-def logout():
-    session.pop('user', None)
-    flash("Logged out")
-    return redirect(url_for('index'))
-
-@app.route('/add_pin', methods=['POST'])
-def add_pin():
-    if 'user' not in session: return redirect(url_for('index'))
-    
-    img_url = request.form.get('img_url')
-    caption = request.form.get('caption')
-    
-    if not img_url:
-        flash("Image URL is required")
-        return redirect(url_for('index'))
-
-    new_pin = {
-        "id": int(time.time()),
-        "url": img_url,
-        "caption": caption,
-        "author": session['user']
-    }
-    
-    DATA_CACHE.setdefault('pins', []).insert(0, new_pin)
-    save_db(DATA_CACHE)
-    flash("Pin added!")
-    return redirect(url_for('index'))
-
-if __name__ == '__main__':
-    app.run(host='0.0.0.0', port=7860)
+        print(f"Database not found or error loading: {e}")
+        # 3. If it fails, assume it's a new app and start fresh
+        return {"users": {}, "pins": []}
+        

index.html

@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Visual Board</title>
+    <style>
+        /* --- RESET & BASIC --- */
+        body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #fafafa; }
+        nav { padding: 15px; background: white; box-shadow: 0 2px 5px rgba(0,0,0,0.05); display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 100;}
+        
+        /* --- MASONRY LAYOUT (The Pinterest Magic) --- */
+        .gallery {
+            column-count: 5; /* Default columns */
+            column-gap: 15px;
+            padding: 15px;
+            max-width: 1600px;
+            margin: 0 auto;
+        }
+        
+        .pin {
+            break-inside: avoid;
+            margin-bottom: 15px;
+            border-radius: 16px;
+            overflow: hidden;
+            position: relative;
+            background: white;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+            transition: transform 0.2s;
+        }
+        .pin:hover { transform: translateY(-2px); box-shadow: 0 5px 12px rgba(0,0,0,0.2); }
+        .pin img { width: 100%; display: block; height: auto; }
+        .pin-info { padding: 10px; font-size: 0.9rem; color: #333; }
+        
+        /* --- RESPONSIVE --- */
+        @media (max-width: 1200px) { .gallery { column-count: 4; } }
+        @media (max-width: 900px) { .gallery { column-count: 3; } }
+        @media (max-width: 600px) { .gallery { column-count: 2; } }
+
+        /* --- UI ELEMENTS --- */
+        .btn { padding: 8px 16px; border-radius: 20px; border: none; cursor: pointer; font-weight: bold; }
+        .btn-red { background: #e60023; color: white; }
+        .btn-grey { background: #efefef; color: black; }
+        
+        .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 200; align-items: center; justify-content: center; }
+        .modal-content { background: white; padding: 30px; border-radius: 16px; width: 300px; text-align: center; }
+        input { width: 90%; padding: 10px; margin: 5px 0; border: 1px solid #ddd; border-radius: 8px; }
+        
+        /* Show modal helper */
+        .show { display: flex !important; }
+    </style>
+</head>
+<body>
+
+<nav>
+    <div style="font-weight:bold; color:#e60023; font-size:1.2rem;">📌 PinSpace</div>
+    <div>
+        {% if user %}
+            <span style="margin-right:10px;">Hi, {{ user }}</span>
+            <button class="btn btn-grey" onclick="toggleModal('uploadModal')">+ Create</button>
+            <a href="/logout"><button class="btn btn-grey">Logout</button></a>
+        {% else %}
+            <button class="btn btn-red" onclick="toggleModal('loginModal')">Log in</button>
+            <button class="btn btn-grey" onclick="toggleModal('signupModal')">Sign up</button>
+        {% endif %}
+    </div>
+</nav>
+
+{% with messages = get_flashed_messages() %}
+  {% if messages %}
+    <div style="text-align:center; padding:10px; background:#fff3cd;">{{ messages[0] }}</div>
+  {% endif %}
+{% endwith %}
+
+<div class="gallery">
+    {% for pin in pins %}
+    <div class="pin">
+        <img src="{{ pin.url }}" onerror="this.src='https://via.placeholder.com/300?text=Broken+Link'">
+        <div class="pin-info">
+            <strong>{{ pin.caption }}</strong><br>
+            <span style="color:#777; font-size:0.8rem">by {{ pin.author }}</span>
+        </div>
+    </div>
+    {% endfor %}
+</div>
+
+<div id="loginModal" class="modal">
+    <div class="modal-content">
+        <h2>Login</h2>
+        <form action="/login" method="POST">
+            <input type="text" name="username" placeholder="Username" required>
+            <input type="password" name="password" placeholder="Password" required>
+            <br><br><button class="btn btn-red" type="submit">Log in</button>
+        </form>
+        <p onclick="toggleModal('loginModal')" style="cursor:pointer; font-size:0.8rem; color:#777;">Close</p>
+    </div>
+</div>
+
+<div id="signupModal" class="modal">
+    <div class="modal-content">
+        <h2>Sign Up</h2>
+        <form action="/signup" method="POST">
+            <input type="text" name="username" placeholder="Username" required>
+            <input type="password" name="password" placeholder="Password" required>
+            <br><br><button class="btn btn-red" type="submit">Create Account</button>
+        </form>
+        <p onclick="toggleModal('signupModal')" style="cursor:pointer; font-size:0.8rem; color:#777;">Close</p>
+    </div>
+</div>
+
+<div id="uploadModal" class="modal">
+    <div class="modal-content">
+        <h2>Add a Pin</h2>
+        <form action="/add_pin" method="POST">
+            <input type="text" name="img_url" placeholder="Image URL (e.g. https://...)" required>
+            <input type="text" name="caption" placeholder="Caption" required>
+            <br><br><button class="btn btn-red" type="submit">Post</button>
+        </form>
+        <p onclick="toggleModal('uploadModal')" style="cursor:pointer; font-size:0.8rem; color:#777;">Close</p>
+    </div>
+</div>
+
+<script>
+    function toggleModal(id) {
+        const el = document.getElementById(id);
+        el.classList.toggle('show');
+    }
+</script>
+
+</body>
+</html>

requirements.txt

@@ -2,4 +2,3 @@ flask
 huggingface_hub
 werkzeug
 pandas
-python-dotenv

templates/index.html

@@ -1,155 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Visual Board</title>
-    <style>
-        /* --- CORE STYLES --- */
-        body { margin: 0; font-family: sans-serif; background: #fafafa; padding-top: 80px; }
-        
-        /* NAVBAR */
-        nav { 
-            position: fixed; top: 0; left: 0; right: 0; height: 65px;
-            background: white; display: flex; align-items: center; justify-content: space-between;
-            padding: 0 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); z-index: 1000;
-        }
-        .logo { color: #e60023; font-weight: bold; font-size: 1.2rem; display: flex; align-items: center; gap: 5px; }
-        .user-greeting { margin-right: 15px; font-weight: 600; color: #333; }
-
-        /* BUTTONS */
-        .btn { padding: 10px 16px; border-radius: 24px; border: none; font-weight: bold; cursor: pointer; font-size: 0.9rem; transition: 0.2s; }
-        .btn-red { background: #e60023; color: white; }
-        .btn-grey { background: #efefef; color: black; }
-        .btn:hover { opacity: 0.85; transform: scale(1.02); }
-
-        /* PINS / MASONRY */
-        .gallery {
-            column-count: 5; column-gap: 15px; padding: 10px; max-width: 1400px; margin: 0 auto;
-        }
-        .pin {
-            break-inside: avoid; margin-bottom: 15px; border-radius: 16px; overflow: hidden;
-            background: white; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: 0.2s;
-        }
-        .pin:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
-        .pin img { width: 100%; display: block; }
-        .pin-info { padding: 10px 12px; font-size: 0.85rem; }
-        .pin-author { color: #777; font-size: 0.8rem; margin-top: 4px; display: block; }
-
-        /* RESPONSIVE COLUMNS */
-        @media (max-width: 1200px) { .gallery { column-count: 4; } }
-        @media (max-width: 900px) { .gallery { column-count: 3; } }
-        @media (max-width: 600px) { .gallery { column-count: 2; padding: 5px; } nav { padding: 0 10px; } .user-greeting { display: none; } }
-
-        /* MODALS (Login/Signup) */
-        .modal {
-            display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
-            background: rgba(0,0,0,0.5); z-index: 2000; align-items: center; justify-content: center;
-            backdrop-filter: blur(2px);
-        }
-        .modal.show { display: flex; }
-        .modal-content {
-            background: white; padding: 30px; border-radius: 24px; width: 90%; max-width: 380px;
-            text-align: center; box-shadow: 0 10px 25px rgba(0,0,0,0.2);
-        }
-        .modal input {
-            width: 100%; padding: 12px; margin: 8px 0; border: 2px solid #ddd; 
-            border-radius: 12px; box-sizing: border-box; font-size: 1rem;
-        }
-        .modal input:focus { border-color: #e60023; outline: none; }
-        
-        /* ALERT BAR */
-        .alert {
-            background: #333; color: white; text-align: center; padding: 12px;
-            position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%);
-            border-radius: 50px; z-index: 3000; min-width: 300px;
-            box-shadow: 0 5px 15px rgba(0,0,0,0.3); animation: popUp 0.3s ease-out;
-        }
-        @keyframes popUp { from { transform: translate(-50%, 100%); } to { transform: translate(-50%, 0); } }
-    </style>
-</head>
-<body>
-
-<nav>
-    <div class="logo">📌 PinSpace</div>
-    <div style="display:flex; align-items:center;">
-        {% if user %}
-            <span class="user-greeting">Hi, {{ user }}</span>
-            <button class="btn btn-grey" onclick="openModal('uploadModal')" style="margin-right: 10px;">+ Add Pin</button>
-            <a href="/logout" style="text-decoration:none;"><button class="btn btn-red">Log Out</button></a>
-        {% else %}
-            <button class="btn btn-red" onclick="openModal('loginModal')" style="margin-right: 10px;">Log in</button>
-            <button class="btn btn-grey" onclick="openModal('signupModal')">Sign up</button>
-        {% endif %}
-    </div>
-</nav>
-
-{% with messages = get_flashed_messages() %}
-  {% if messages %}
-    <div class="alert" onclick="this.style.display='none'">{{ messages[0] }}</div>
-  {% endif %}
-{% endwith %}
-
-<div class="gallery">
-    {% for pin in pins %}
-    <div class="pin">
-        <img src="{{ pin.url }}" loading="lazy" alt="Pin">
-        <div class="pin-info">
-            <strong>{{ pin.caption }}</strong>
-            <span class="pin-author">by {{ pin.author }}</span>
-        </div>
-    </div>
-    {% endfor %}
-</div>
-
-<div id="loginModal" class="modal" onclick="closeModal(event, 'loginModal')">
-    <div class="modal-content">
-        <h2 style="margin-top:0">Welcome Back</h2>
-        <form action="/login" method="POST">
-            <input type="text" name="username" placeholder="Username" required>
-            <input type="password" name="password" placeholder="Password" required>
-            <br><br>
-            <button class="btn btn-red" style="width:100%">Log In</button>
-        </form>
-    </div>
-</div>
-
-<div id="signupModal" class="modal" onclick="closeModal(event, 'signupModal')">
-    <div class="modal-content">
-        <h2 style="margin-top:0">Join PinSpace</h2>
-        <form action="/signup" method="POST">
-            <input type="text" name="username" placeholder="Choose Username" required>
-            <input type="password" name="password" placeholder="Password" required>
-            <br><br>
-            <button class="btn btn-red" style="width:100%">Create Account</button>
-        </form>
-    </div>
-</div>
-
-<div id="uploadModal" class="modal" onclick="closeModal(event, 'uploadModal')">
-    <div class="modal-content">
-        <h2 style="margin-top:0">Add Image</h2>
-        <form action="/add_pin" method="POST">
-            <input type="text" name="img_url" placeholder="Paste Image URL here..." required>
-            <input type="text" name="caption" placeholder="Caption / Title" required>
-            <br><br>
-            <button class="btn btn-grey" style="width:100%">Post Pin</button>
-        </form>
-        <p style="font-size:0.8rem; color:#888; margin-bottom:0">Paste a link ending in .jpg or .png</p>
-    </div>
-</div>
-
-<script>
-    function openModal(id) {
-        document.getElementById(id).classList.add('show');
-    }
-    function closeModal(e, id) {
-        // Close if clicking outside the white box (the dark overlay)
-        if(e.target.id === id) {
-            document.getElementById(id).classList.remove('show');
-        }
-    }
-</script>
-
-</body>
-</html>