π Deployment Guide: Hugging Face Spaces
This guide walks you through deploying the Awesome Multi-Agent Collaborative Perception interactive website to Hugging Face Spaces.
π Prerequisites
- Hugging Face account (sign up here)
- Git installed on your system
- Basic familiarity with Git commands
π― Quick Deployment
Option 1: Create Space Directly on Hugging Face
Go to Hugging Face Spaces
- Visit huggingface.co/spaces
- Click "Create new Space"
Configure Your Space
- Space name:
awesome-multi-agent-collaborative-perception
- SDK: Select "Gradio"
- Visibility: Public (recommended)
- License: MIT
- Space name:
Upload Files
- Upload all files from this directory:
app.py
collaborative-perception.html
requirements.txt
README.md
- Upload all files from this directory:
Option 2: Git Clone and Push
Create the Space on HF
- Follow steps 1-2 from Option 1
- Copy the Git repository URL
Clone and Setup
git clone https://huggingface.co/spaces/YOUR_USERNAME/awesome-multi-agent-collaborative-perception cd awesome-multi-agent-collaborative-perception
Copy Files
- Copy all files from this project into the cloned directory
Commit and Push
git add . git commit -m "Initial deployment of collaborative perception website" git push
π§ File Structure
Your Hugging Face Space should have this structure:
awesome-multi-agent-collaborative-perception/
βββ app.py # Gradio app entry point
βββ collaborative-perception.html # Main interactive website
βββ requirements.txt # Python dependencies
βββ README.md # Space description with HF metadata
βββ .gitignore # Git ignore rules
βββ DEPLOYMENT.md # This file
βοΈ Configuration Files
app.py
- Simple Gradio wrapper that serves the HTML file
- Configured for full-width display
- Minimal overhead for maximum performance
requirements.txt
- Only requires
gradio==4.44.0
- Lightweight dependencies for fast startup
README.md
- Contains Hugging Face Space metadata in frontmatter
- Serves as the Space's landing page description
π Metadata Configuration
The README.md contains crucial metadata for Hugging Face:
---
title: Awesome Multi-Agent Collaborative Perception
emoji: π€
colorFrom: blue
colorTo: purple
sdk: gradio
sdk_version: 4.44.0
app_file: app.py
pinned: false
license: mit
---
Important: Update your-username
placeholders in the README with your actual Hugging Face username.
π¨ Customization
Update Branding
- Change the
title
andemoji
in README frontmatter - Update social links in README badges
- Modify the color scheme (
colorFrom
,colorTo
)
Add Analytics
Add tracking code to collaborative-perception.html
before </body>
:
<!-- Google Analytics or your preferred analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA_MEASUREMENT_ID');
</script>
π Post-Deployment
1. Test Your Space
- Visit your Space URL:
https://huggingface.co/spaces/YOUR_USERNAME/awesome-multi-agent-collaborative-perception
- Test all interactive features
- Verify responsiveness on mobile devices
2. Share Your Space
- Add the Space URL to your GitHub repository
- Share on social media using the Space's share button
- Include in your research papers and presentations
3. Monitor Usage
- Check Space analytics in your HF dashboard
- Monitor for user feedback and issues
- Update content regularly
π Space Statistics
Your Space will track:
- Views: Total page visits
- Likes: User appreciation
- Duplicates: Forks of your Space
- Comments: User feedback
π Updates and Maintenance
Regular Content Updates
- Monthly: Update with latest papers and datasets
- Quarterly: Refresh conference information
- Annually: Major design improvements
Technical Updates
# Pull latest changes
git pull
# Make your updates
# ... edit files ...
# Push changes
git add .
git commit -m "Update: Added latest CVPR 2025 papers"
git push
π‘ Pro Tips
- Performance: Keep the HTML file under 2MB for fast loading
- SEO: Update meta tags in the HTML for better search visibility
- Accessibility: Test with screen readers and keyboard navigation
- Mobile: Always test on mobile devices before deployment
- Backup: Keep a local backup of your custom content
π Troubleshooting
Common Issues
Space won't start:
- Check
requirements.txt
syntax - Verify
app.py
imports work - Ensure HTML file exists and is valid
HTML not displaying correctly:
- Check file encoding (should be UTF-8)
- Verify JavaScript console for errors
- Test HTML file locally first
Gradio errors:
- Update to latest Gradio version
- Check Gradio documentation for breaking changes
- Simplify the Gradio interface if needed
Getting Help
- Hugging Face Forum: discuss.huggingface.co
- Discord: Hugging Face Discord
- Documentation: hf.co/docs/hub/spaces
π License
This deployment is licensed under MIT License. See the main README.md for details.
π Ready to deploy? Your interactive collaborative perception website will be live in minutes!