CoolFace
Apppublic

Sachin5112/Kawaii-Shorts

sourceHugging Faceupdated 11mo agoView on Hugging Face
0likes
App README

Kawaii Shorts - TikTok-Style Short Video Platform

This is a full-featured short video platform that stores all data persistently in your Hugging Face dataset Sahil5112/Fan_hub.

Features

✅ Persistent Storage: All uploads, users, and comments are saved to your HF dataset ✅ AI-Powered Search: Uses CLIP embeddings and FAISS for semantic image search ✅ Real File Uploads: Images and videos are uploaded to your HF dataset ✅ Mobile-First Design: Responsive interface optimized for all devices ✅ Rich Features: Feed, upload, likes, comments, categories, search

Files Included

  • —app.py - Flask backend with HF dataset integration, CLIP/FAISS search
  • —index.html - Complete React frontend (bundled, self-contained)
  • —requirements.txt - All Python dependencies

Quick Start (TL;DR)

  1. 1.Create/verify dataset: https://huggingface.co/datasets/Sahil5112/Fan_hub
  2. 2.Get HF token with Write permission: https://huggingface.co/settings/tokens
  3. 3.Create Space with Docker SDK: https://huggingface.co/new-space
  4. 4.Add HF_TOKEN secret in Space Settings → Repository secrets
  5. 5.Upload all files: app.py, index.html, requirements.txt, Dockerfile
  6. 6.Wait 2-3 minutes for deployment
  7. 7.Access your app at: https://YOUR_USERNAME-YOUR_SPACE_NAME.hf.space
  8. 8.Verify setup at: https://YOUR_USERNAME-YOUR_SPACE_NAME.hf.space/api/health

How to Deploy to Hugging Face Spaces

Step 1: Create Your Dataset (if not exists)

  1. 1.Go to https://huggingface.co/datasets/Sahil5112/Fan_hub
  2. 2.If it doesn't exist, create a new dataset at https://huggingface.co/new-dataset
  3. 3.Name it Fan_hub and set it to Public or Private

Step 2: Get Your Hugging Face Token

  1. 1.Go to https://huggingface.co/settings/tokens
  2. 2.Click New token
  3. 3.Give it a name (e.g., "Fanhubtoken")
  4. 4.Select Write permission (required for uploads)
  5. 5.Copy the token (starts with hf_...)

Step 3: Create the Space

  1. 1.Go to https://huggingface.co/new-space
  2. 2.Choose a name for your Space
  3. 3.Select Docker as the SDK
  4. 4.Choose Public or Private visibility
  5. 5.Click Create Space

Step 4: Add Your Token as a Secret

⚠️ IMPORTANT: This step is required for the app to work!

  1. 1.In your Space, go to Settings tab
  2. 2.Scroll down to Repository secrets
  3. 3.Click New secret
  4. 4.Name: HF_TOKEN
  5. 5.Value: Paste your token (the one starting with hf_...)
  6. 6.Click Add secret

Step 5: Upload the Files

Upload all four files to your Space:

  • —app.py
  • —index.html
  • —requirements.txt
  • —Dockerfile

Or use Git:

bash
git clone https://huggingface.co/spaces/YOUR_USERNAME/YOUR_SPACE_NAME
cd YOUR_SPACE_NAME
cp /path/to/hf_space/* .
git add .
git commit -m "Initial commit"
git push

Step 6: Wait for Deployment

  • —HF Spaces will automatically install dependencies (this takes 2-3 minutes)
  • —The app will be available at: https://YOUR_USERNAME-YOUR_SPACE_NAME.hf.space

How It Works

Data Storage

All data is stored in your HF dataset Sahil5112/Fan_hub:

  • —Uploaded files: Images/videos uploaded by users
  • —index.faiss: FAISS index for image similarity search
  • —index_map.json: Mapping between FAISS indices and media
  • —users.json: User profiles and account data
  • —media.json: Media metadata (titles, descriptions, likes, views)
  • —comments.json: All comments on posts

AI-Powered Features

  • —CLIP Embeddings: Uses OpenAI's CLIP model to create semantic embeddings of images
  • —FAISS Search: Fast similarity search for finding related images
  • —Text-to-Image: Search for images using natural language

Local Testing

To test locally before deploying:

bash
# Install dependencies
pip install -r requirements.txt

# Set your HF token
export HF_TOKEN="hf_your_token_here"

# Run the app
python app.py

Then open http://localhost:7860 in your browser.

Technical Stack

  • —Backend: Flask (Python)
  • —Frontend: React (bundled into single HTML file)
  • —Storage: Hugging Face Dataset
  • —AI Models: CLIP (openai/clip-vit-base-patch32)
  • —Vector Search: FAISS
  • —Image Processing: Pillow

Data Persistence

Unlike the previous in-memory version, this app:

  • —✅ Saves all data to your HF dataset
  • —✅ Survives Space restarts
  • —✅ Supports real file uploads
  • —✅ Enables AI-powered image search
  • —✅ Syncs state automatically

Troubleshooting

Verifying Configuration

Visit /api/health to check your app's configuration status:

https://YOUR_USERNAME-YOUR_SPACE_NAME.hf.space/api/health

This will show:

  • —hf_token_configured: Whether HF_TOKEN is set (should be true)
  • —dataset_repo: Your dataset location
  • —media_count, users_count: Number of items in the database
  • —faiss_index_size: Number of images indexed for AI search

Common Issues

"Permission denied: /.cache" Error:

  • —This is fixed in the updated Dockerfile
  • —Cache directories are created with proper permissions before pip install
  • —The HFHOME and TRANSFORMERSCACHE environment variables are set to /app/.cache
  • —If you still see this error after deploying the updated files, try rebuilding the Space from scratch

App shows error on startup:

  • —Make sure you added the HF_TOKEN secret in Space Settings
  • —Verify your token has Write permission
  • —Check that the dataset Sahil5112/Fan_hub exists and is accessible
  • —Visit /api/health to verify configuration

Uploads fail:

  • —Verify your HF token has write access to the dataset
  • —Check the Space logs for error messages
  • —Ensure the dataset is not private (unless your token has access)
  • —Visit /api/health to confirm hf_token_configured: true

Search not working:

  • —Text search works without CLIP, but AI-powered search needs CLIP model loaded
  • —Check Space logs for CLIP loading errors
  • —Verify sufficient Space resources (CPU/GPU) for model

FAISS/CLIP errors:

  • —The app will fall back to basic text search if CLIP fails to load
  • —Check that all dependencies installed correctly
  • —Review Space build logs for installation errors
  • —Ensure adequate memory for model loading

Dataset Structure

Your dataset will contain:

Sahil5112/Fan_hub/
├── 20250113_120000_photo1.jpg     # Uploaded images
├── 20250113_120100_video1.mp4     # Uploaded videos
├── index.faiss                     # FAISS vector index
├── index_map.json                  # Index mapping
├── users.json                      # User data
├── media.json                      # Media metadata
└── comments.json                   # Comments data

Security Notes

  • —Never share your HF_TOKEN publicly
  • —Store it only in HF Space Secrets
  • —Use a token with minimal required permissions
  • —Regularly rotate your tokens for security

Support

For issues or questions, check:

  • —HF Spaces documentation: https://huggingface.co/docs/hub/spaces
  • —Dataset documentation: https://huggingface.co/docs/hub/datasets