Val Town Chat Bot with Image Capabilities
An interactive chat bot built on Val Town with advanced image features. This chat bot offers:
- Clean, modern user interface
- Persistent conversation history
- Basic rule-based responses
- Image generation capabilities
- Image analysis using AI
- Mobile-friendly design
/index.ts
- Main HTTP endpoint and chat logic
/frontend/index.html
- User interface for the chat bot
- Real-time messaging with typing indicators
- Conversation history stored between sessions
- Ability to start new conversations
- Responsive design that works on mobile and desktop
- Image upload and display capabilities
- Image generation modal
- Responds to basic greetings and questions
- Maintains context within conversations
- Generates images based on text descriptions
- Analyzes uploaded images using OpenAI's vision capabilities
- Simple rule-based response system
- Uses Val Town's blob storage to maintain conversation history
- Each conversation is stored with a unique ID
- Supports storing text messages and image references
- Built with vanilla JavaScript, HTML, and CSS
- Uses Twind for styling
- Includes error catching for debugging
- Handles file uploads and image display
- Built with Hono for routing
- OpenAI integration for image analysis
- Val Town image generation service integration
- Conversation context tracking with support for different message types
- Uses Val Town's recommended approach:
https://maxm-imggenurl.web.val.run/
- Generates images based on text descriptions
- Displays generated images directly in the chat interface
- Uses OpenAI's vision capabilities to analyze uploaded images
- Supports common image formats (JPEG, PNG, etc.)
- Provides detailed descriptions of image content
Potential enhancements for this chat bot:
- More sophisticated image generation options (style, size, etc.)
- Image editing capabilities
- User authentication for personalized experiences
- Multi-language support
- Image categorization and tagging
Simply visit the Val Town URL for this project to start chatting with the bot.
Type your message in the input field and press Enter or click Send.
- Click the "Generate Image" button
- Enter a description of the image you want to generate
- Click "Generate" to create and display the image
- Click the "Upload Image" button
- Select an image file from your device
- The bot will analyze the image and provide a description
To start a new conversation, click the "Start New Chat" link at the bottom of the interface.