Hugging Face's logo

Spaces:
blakeurmos
/
mayahq
Sleeping

App Files Community
mayahq / background-options.md
lowvoltagenation
Refactor chat history structure in MayaGradioApp to use dictionaries for messages and enhance CSS styling for the header.
c52779e
preview code
|
raw
history blame contribute delete
2.58 kB

A newer version of the Gradio SDK is available: 6.13.0

Upgrade

Maya Header Background Options

🚀 Space & Tech Themes 

/* Current: Digital Space */
background-image: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&h=400&q=80');

/* AI/Neural Network */
background-image: url('https://images.unsplash.com/photo-1677442136019-21780ecad995?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&h=400&q=80');

/* Circuit Board */
background-image: url('https://images.unsplash.com/photo-1518709268805-4e9042af2176?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&h=400&q=80');

/* Futuristic City */
background-image: url('https://images.unsplash.com/photo-1519452575417-564c1401ecc0?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&h=400&q=80');

/* Data Visualization */
background-image: url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&h=400&q=80');

🤖 Robot & AI Themes 

/* Robot Hand */
background-image: url('https://images.unsplash.com/photo-1485827404703-89b55fcc595e?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&h=400&q=80');

/* AI Brain */
background-image: url('https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&h=400&q=80');

/* Holographic Interface */
background-image: url('https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&h=400&q=80');

💻 Code & Matrix Themes 

/* Code Matrix */
background-image: url('https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&h=400&q=80');

/* Binary Code */
background-image: url('https://images.unsplash.com/photo-1518709268805-4e9042af2176?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&h=400&q=80');

🌟 Abstract & Artistic 

/* Purple Gradient Mesh */
background-image: url('https://images.unsplash.com/photo-1634017839464-5c339ebe3cb4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&h=400&q=80');

/* Neon Lights */
background-image: url('https://images.unsplash.com/photo-1518709268805-4e9042af2176?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&h=400&q=80');

🎯 How to Change

  1. Edit src/app.py
  2. Find the .maya-header CSS section
  3. Replace the background-image: url('...') line
  4. Restart your app: python src/app.py

🔧 Local Images

To use your own images:

  1. Create an assets/ folder in your project
  2. Add your image file (e.g., maya-bg.jpg)
  3. Use: background-image: url('./assets/maya-bg.jpg');
  4. Upload the assets/ folder when deploying to HuggingFace