# AI Vision Studio 🎨

A fully functional HTML website for AI-powered image generation featuring Image-to-Image and Text-to-Image capabilities with real-time community features, authentication, and Hugging Face integration.

## ✨ Features

### 🖼️ AI Image Generation
- **Image-to-Image Transformation**: Upload images and transform them with AI using style prompts
- **Text-to-Image Generation**: Create images from text descriptions with customizable styles
- **Style Controls**: Adjustable strength, multiple style options, and size selection
- **Real-time Results**: Instant preview of generated images with download and share options

### 🎨 Black & Pink Theme
- Modern dark theme with vibrant pink accents
- Responsive design that works on all devices
- Smooth animations and transitions
- Custom scrollbars and interactive elements

### 👥 Community Features
- **Real-time Community Feed**: Live updates of user creations and activities
- **Interactive Gallery**: Browse and like community-generated artwork
- **Live Activity Stream**: Real-time notifications of community actions
- **Filtering Options**: Sort by recent, trending, or featured content

### 🔐 Authentication System
- User registration and login functionality
- Profile management with avatars
- Credit system for image generations
- **Instant Signup Rewards**: New users receive 100 free generations + premium features

### 🎬 Interactive Elements
- **Hero Slideshow**: Auto-advancing slides with videos and images
- **Smooth Navigation**: Scroll-based section highlighting
- **Modal System**: Clean popup interfaces for auth and image viewing
- **Toast Notifications**: Real-time feedback for user actions

## 🚀 Quick Start

1. **Download Files**: Save all files to your web server directory
2. **Open Website**: Navigate to `index.html` in your browser
3. **Sign Up**: Create an account to receive 100 free generations
4. **Start Creating**: Use the Image-to-Image or Text-to-Image tools

## 📁 File Structure

```
ai-vision-studio/
├── index.html # Main website structure
├── styles.css # Complete styling with black/pink theme
├── script.js # Interactive functionality and API integration
└── README.md # Documentation (this file)
```

## 🛠️ Technical Implementation

### Frontend Technologies
- **HTML5**: Semantic markup with modern structure
- **CSS3**: Advanced styling with CSS Grid, Flexbox, and animations
- **Vanilla JavaScript**: No dependencies, pure JS functionality
- **Font Awesome**: Icon library for UI elements
- **Google Fonts**: Inter font family for modern typography

### Key JavaScript Features
- **Modular Architecture**: Organized code with clear separation of concerns
- **Local Storage**: Persistent user sessions and data
- **Canvas API**: Dynamic placeholder image generation
- **Event-driven**: Responsive to user interactions
- **Real-time Updates**: Simulated live community features

### Responsive Design
- **Mobile-first**: Optimized for mobile devices
- **Breakpoints**: 768px (tablet) and 480px (mobile)
- **Flexible Grid**: Auto-adjusting layouts
- **Touch-friendly**: Large clickable areas and smooth interactions

## 🎯 Core Functionality

### Image Generation Workflow

1. **Image-to-Image**:
```javascript
Upload Image → Add Style Prompt → Adjust Strength → Generate → View Results
```

2. **Text-to-Image**:
```javascript
Enter Text Prompt → Select Style → Choose Size → Generate → View Results
```

### Authentication Flow

1. **New User**:
```javascript
Sign Up → Instant Reward Popup → 100 Free Credits → Start Creating
```

2. **Returning User**:
```javascript
Login → Access Tools → Generate Images → Share to Community
```

### Community Integration

- **Real-time Feed**: Posts update automatically
- **Like System**: Interactive engagement with community content
- **Activity Stream**: Live updates of user actions
- **Share Feature**: One-click sharing of generated images

## 🎨 Customization

### Color Scheme
The website uses CSS custom properties for easy theme customization:

```css
:root {
--primary-pink: #ff0080;
--secondary-pink: #ff3399;
--primary-black: #0a0a0a;
--secondary-black: #1a1a1a;
/* ... more variables */
}
```

### API Integration
To connect with real AI services, update these functions in `script.js`:

```javascript
// Replace placeholder functions with real API calls
async function generateImageToImage() {
// Add Hugging Face API integration
}

async function generateTextToImage() {
// Add Hugging Face API integration
}
```

## 🔧 Advanced Features

### Hugging Face Integration Ready
The codebase is prepared for Hugging Face API integration:

- API call structure in place
- Error handling implemented
- Loading states and user feedback
- Credit system for usage tracking

### Real-time Community
- Simulated real-time updates (ready for WebSocket integration)
- Activity feed with user interactions
- Community post management
- Like system with instant updates

### Performance Optimizations
- **Lazy Loading**: Images load on demand
- **Efficient DOM Manipulation**: Minimal reflows and repaints
- **Event Delegation**: Optimized event handling
- **CSS Animations**: Hardware-accelerated transitions

## 📱 Responsive Features

### Mobile Experience
- **Touch Gestures**: Swipe-friendly interfaces
- **Optimized Layouts**: Stack elements vertically on small screens
- **Readable Text**: Appropriate font sizes for mobile
- **Fast Loading**: Optimized images and minimal dependencies

### Tablet Experience
- **Medium Layouts**: Balanced between mobile and desktop
- **Touch Targets**: Appropriate button sizes
- **Navigation**: Accessible menu systems

### Desktop Experience
- **Full Features**: All functionality available
- **Keyboard Shortcuts**: ESC to close modals
- **Hover Effects**: Rich interactive feedback
- **Multi-column Layouts**: Efficient use of screen space

## 🎉 Signup Rewards System

New users receive an instant welcome bonus:

- **100 Free Generations**: Immediate credits for image creation
- **Premium Features Access**: Full feature set unlocked
- **Community Upload Rights**: Ability to share creations
- **Animated Popup**: Engaging reward presentation

## 🔮 Future Enhancements

### Planned Features
- **Real AI Integration**: Connect to actual Hugging Face models
- **User Profiles**: Extended profile customization
- **Collections**: Organize favorite images
- **Advanced Filters**: More sophisticated image processing
- **Social Features**: Follow users, comments, and messaging

### Technical Improvements
- **Backend Integration**: User management and data persistence
- **WebSocket Support**: True real-time community features
- **Image Storage**: Cloud-based image hosting
- **Analytics**: User behavior tracking and insights

## 📊 Browser Support

- **Chrome**: Full support (recommended)
- **Firefox**: Full support
- **Safari**: Full support
- **Edge**: Full support
- **Mobile Browsers**: Optimized experience

## 🛡️ Security Considerations

- **Client-side Validation**: Input sanitization
- **XSS Prevention**: Safe DOM manipulation
- **HTTPS Ready**: Secure connection support
- **Local Storage**: Secure user data handling

## 🤝 Contributing

The codebase is structured for easy enhancement:

1. **Modular JavaScript**: Add new features in separate functions
2. **CSS Variables**: Customize theme by updating CSS custom properties
3. **Component Structure**: HTML sections are clearly organized
4. **Documentation**: Code is well-commented for easy understanding

## 📞 Support

For questions or issues:
- Review the code comments for implementation details
- Check browser console for debugging information
- Ensure all files are properly served (not file:// protocol)
- Verify internet connection for external resources

---

**AI Vision Studio** - Empowering creativity through artificial intelligence 🚀✨

Built with ❤️ using modern web technologies and designed for the future of AI-powered content creation.

components/auth-modal.js

@@ -0,0 +1,181 @@
+class AuthModal extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .modal {
+                    position: fixed;
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    bottom: 0;
+                    background: rgba(0, 0, 0, 0.8);
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    z-index: 1000;
+                    opacity: 0;
+                    pointer-events: none;
+                    transition: opacity 0.3s ease;
+                }
+                
+                .modal.active {
+                    opacity: 1;
+                    pointer-events: all;
+                }
+                
+                .modal-content {
+                    background: var(--secondary-black);
+                    border-radius: var(--border-radius);
+                    padding: 2rem;
+                    width: 90%;
+                    max-width: 400px;
+                    box-shadow: var(--shadow-dark);
+                    transform: translateY(20px);
+                    transition: transform 0.3s ease;
+                }
+                
+                .modal.active .modal-content {
+                    transform: translateY(0);
+                }
+                
+                .modal-header {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    margin-bottom: 1.5rem;
+                }
+                
+                .modal-title {
+                    font-size: 1.5rem;
+                    font-weight: 600;
+                    color: var(--text-white);
+                }
+                
+                .close-btn {
+                    background: none;
+                    border: none;
+                    color: var(--text-gray);
+                    font-size: 1.5rem;
+                    cursor: pointer;
+                }
+                
+                .auth-form {
+                    display: flex;
+                    flex-direction: column;
+                    gap: 1rem;
+                }
+                
+                .form-group {
+                    display: flex;
+                    flex-direction: column;
+                    gap: 0.5rem;
+                }
+                
+                .form-label {
+                    font-size: 0.875rem;
+                    color: var(--text-gray);
+                }
+                
+                .form-input {
+                    padding: 0.75rem;
+                    border-radius: 6px;
+                    border: 1px solid var(--tertiary-black);
+                    background: var(--primary-black);
+                    color: var(--text-white);
+                }
+                
+                .submit-btn {
+                    background: var(--primary-pink);
+                    color: white;
+                    padding: 0.75rem;
+                    border: none;
+                    border-radius: 6px;
+                    font-weight: 600;
+                    cursor: pointer;
+                    margin-top: 1rem;
+                    transition: var(--transition);
+                }
+                
+                .submit-btn:hover {
+                    background: var(--secondary-pink);
+                }
+                
+                .auth-switch {
+                    text-align: center;
+                    margin-top: 1rem;
+                    color: var(--text-gray);
+                    font-size: 0.875rem;
+                }
+                
+                .auth-switch-btn {
+                    color: var(--primary-pink);
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                }
+            </style>
+            
+            <div class="modal" id="auth-modal">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h3 class="modal-title" id="modal-title">Sign In</h3>
+                        <button class="close-btn" id="close-modal">&times;</button>
+                    </div>
+                    <form class="auth-form" id="auth-form">
+                        <div class="form-group">
+                            <label class="form-label">Email</label>
+                            <input type="email" class="form-input" required>
+                        </div>
+                        <div class="form-group">
+                            <label class="form-label">Password</label>
+                            <input type="password" class="form-input" required>
+                        </div>
+                        <button type="submit" class="submit-btn">Continue</button>
+                    </form>
+                    <div class="auth-switch">
+                        <span id="switch-text">Don't have an account?</span>
+                        <button class="auth-switch-btn" id="switch-btn">Sign up</button>
+                    </div>
+                </div>
+            </div>
+        `;
+        
+        this.shadowRoot.getElementById('close-modal').addEventListener('click', () => {
+            this.hide();
+        });
+        
+        this.shadowRoot.getElementById('switch-btn').addEventListener('click', () => {
+            this.toggleAuthMode();
+        });
+    }
+    
+    show() {
+        this.shadowRoot.getElementById('auth-modal').classList.add('active');
+    }
+    
+    hide() {
+        this.shadowRoot.getElementById('auth-modal').classList.remove('active');
+    }
+    
+    toggleAuthMode() {
+        const title = this.shadowRoot.getElementById('modal-title');
+        const submitBtn = this.shadowRoot.querySelector('.submit-btn');
+        const switchText = this.shadowRoot.getElementById('switch-text');
+        const switchBtn = this.shadowRoot.getElementById('switch-btn');
+        
+        if (title.textContent === 'Sign In') {
+            title.textContent = 'Sign Up';
+            submitBtn.textContent = 'Create Account';
+            switchText.textContent = 'Already have an account?';
+            switchBtn.textContent = 'Sign in';
+        } else {
+            title.textContent = 'Sign In';
+            submitBtn.textContent = 'Continue';
+            switchText.textContent = 'Don\'t have an account?';
+            switchBtn.textContent = 'Sign up';
+        }
+    }
+}
+
+customElements.define('auth-modal', AuthModal);

index.html

@@ -46,9 +46,9 @@
     </script>
 </head>
 <body class="bg-primary-black text-white">
+<auth-modal></auth-modal>
 <custom-navbar></custom-navbar>
-    
-    <main class="container mx-auto px-4 py-8">
+<main class="container mx-auto px-4 py-8">
         <!-- Feature Banners -->
         <div class="space-y-4 mb-6">
                         <div class="p-4 bg-gradient-to-r from-primary-pink/10 to-secondary-pink/10 rounded-lg border border-primary-pink/20">
@@ -238,9 +238,23 @@ Try Batch Processing
             </div>
         </div>
     </main>
+    <!-- Community Feed Section -->
+    <section class="bg-secondary-black py-12 px-4">
+        <div class="container mx-auto">
+            <h2 class="text-3xl font-bold mb-8 text-center text-white">Community Creations</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="community-feed">
+                <!-- Feed items will be populated by JavaScript -->
+            </div>
+            <div class="text-center mt-8">
+                <button id="load-more" class="bg-primary-pink hover:bg-secondary-pink text-white px-6 py-3 rounded-lg font-medium transition-colors">
+                    Load More
+                </button>
+            </div>
+        </div>
+    </section>
 
     <custom-footer></custom-footer>
-
+    <script src="components/auth-modal.js"></script>
     <script src="script.js"></script>
     <script>
         feather.replace();

script.js

@@ -1,7 +1,81 @@
+
+// Community feed data
+const communityPosts = [
+    {
+        id: 1,
+        user: 'AI_Artist_42',
+        avatar: 'http://static.photos/people/200x200/1',
+        image: 'http://static.photos/abstract/640x360/1',
+        prompt: 'Cyberpunk city at night with neon lights',
+        likes: 142,
+        timestamp: '2 hours ago'
+    },
+    {
+        id: 2,
+        user: 'DigitalDreamer',
+        avatar: 'http://static.photos/people/200x200/2',
+        image: 'http://static.photos/abstract/640x360/2',
+        prompt: 'Surreal landscape with floating islands',
+        likes: 89,
+        timestamp: '5 hours ago'
+    },
+    {
+        id: 3,
+        user: 'PixelPioneer',
+        avatar: 'http://static.photos/people/200x200/3',
+        image: 'http://static.photos/abstract/640x360/3',
+        prompt: 'Portrait of a robot with human emotions',
+        likes: 217,
+        timestamp: '1 day ago'
+    }
+];
+
+// Render community feed
+function renderCommunityFeed() {
+    const feedContainer = document.getElementById('community-feed');
+    feedContainer.innerHTML = '';
+    
+    communityPosts.forEach(post => {
+        const postElement = document.createElement('div');
+        postElement.className = 'bg-tertiary-black rounded-lg overflow-hidden shadow-lg transition-transform hover:scale-105';
+        postElement.innerHTML = `
+            <div class="relative">
+                <img src="${post.image}" alt="${post.prompt}" class="w-full h-64 object-cover">
+                <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4">
+                    <p class="text-white font-medium">${post.prompt}</p>
+                </div>
+            </div>
+            <div class="p-4">
+                <div class="flex items-center gap-3 mb-3">
+                    <img src="${post.avatar}" alt="${post.user}" class="w-10 h-10 rounded-full">
+                    <div>
+                        <p class="font-medium text-white">${post.user}</p>
+                        <p class="text-xs text-gray-400">${post.timestamp}</p>
+                    </div>
+                </div>
+                <div class="flex justify-between items-center">
+                    <button class="flex items-center gap-1 text-primary-pink">
+                        <i data-feather="heart"></i>
+                        <span>${post.likes}</span>
+                    </button>
+                    <button class="text-gray-400 hover:text-white">
+                        <i data-feather="share-2"></i>
+                    </button>
+                </div>
+            </div>
+        `;
+        feedContainer.appendChild(postElement);
+    });
+    feather.replace();
+}
+
 document.addEventListener('DOMContentLoaded', function() {
+    // Initialize community feed
+    renderCommunityFeed();
+    
     // Tab functionality
     const tabs = document.querySelectorAll('[role="tab"]');
-    const tabPanels = document.querySelectorAll('[role="tabpanel"]');
+const tabPanels = document.querySelectorAll('[role="tabpanel"]');
     
     tabs.forEach(tab => {
         tab.addEventListener('click', function() {

style.css

@@ -38,6 +38,19 @@ body {
     border-bottom-color: var(--primary-pink);
     color: var(--primary-pink);
 }
+/* Community Feed Styles */
+#community-feed {
+    animation: fadeIn 0.5s ease-out;
+}
+
+.community-post {
+    transition: var(--transition);
+}
+
+.community-post:hover {
+    transform: translateY(-5px);
+    box-shadow: var(--shadow-pink);
+}
 
 /* Animation for generated results */
 @keyframes fadeIn {