Chatty / docs /task_list.md
findEthics
Optimize UI for mobile devices with minimal design
b4487f6
|
Raw
History Blame Contribute Delete
8.57 kB
# Implementation Task List
## Overview
Transform the current Gradio chatbot template into a web app that uses the API "https://findEthics-Atlas.hf.space/chat" with a minimal and basic UI.
## Phase 1: Setup and Dependencies
### Task 1: Update requirements.txt
- [x] Remove `huggingface_hub==0.25.2`
- [x] Add `flask` for web framework
- [x] Add `requests` for HTTP API calls
- [x] Add `gradio` (keep for Hugging Face space compatibility)
### Task 2: Create new project structure
- [x] Create `templates/` directory for HTML files
- [x] Create `static/` directory for CSS/JS files
- [x] Create `static/css/` for stylesheets
- [x] Create `static/js/` for JavaScript files
## Phase 2: Backend Implementation
### Task 3: Create Flask application (`app.py`)
- [x] Import Flask and requests
- [x] Set up Flask app configuration
- [x] Create main route for serving the chat interface
- [x] Create API route for handling chat requests
### Task 4: Implement API client
- [x] Create function to make POST requests to `https://findEthics-Atlas.hf.space/chat`
- [x] Add proper error handling for API failures
- [x] Implement request/response formatting
- [x] Add timeout and retry logic
### Task 5: Create chat functionality
- [x] Implement chat history management
- [x] Create message processing logic
- [x] Handle conversation state
- [x] Add input validation
## Phase 3: Frontend Implementation
### Task 6: Create HTML template (`templates/index.html`)
- [x] Design minimal chat interface
- [x] Add message input field
- [x] Create chat history display area
- [x] Include basic structure for messages
### Task 7: Create CSS styles (`static/css/style.css`)
- [x] Implement minimal, clean design
- [x] Style chat container and messages
- [x] Add responsive design
- [x] Create user-friendly input styling
### Task 8: Create JavaScript functionality (`static/js/chat.js`)
- [x] Implement AJAX calls to backend
- [x] Handle message sending and receiving
- [x] Update chat display dynamically
- [x] Add loading states and error handling
## Phase 4: Integration and Testing
### Task 9: Connect frontend and backend
- [x] Ensure proper communication between HTML/JS and Flask routes
- [x] Test message flow from input to API to display
- [x] Verify chat history persistence
### Task 10: Test API integration
- [x] Test POST requests to the target API
- [x] Verify response handling
- [x] Test error scenarios
- [x] Validate message formatting
## Phase 5: Deployment and Configuration
### Task 11: Update Hugging Face space configuration
- [x] Modify `README.md` to reflect new functionality
- [x] Update app description and metadata
- [x] Ensure proper space configuration
### Task 12: Final testing and optimization
- [x] Test complete user flow
- [x] Optimize performance
- [x] Add any missing error handling
- [x] Ensure responsive design works
## Phase 6: Documentation and Cleanup
### Task 13: Update documentation
- [x] Update README with new functionality
- [x] Add usage instructions
- [x] Document API integration details
### Task 14: Code cleanup and final review
- [x] Remove any unused code
- [x] Ensure code follows best practices
- [x] Add comments where needed
- [x] Final testing of all functionality
## Priority Levels
### High Priority (Core functionality)
- Tasks 1-5: Backend setup and API integration
### Medium Priority (User interface)
- Tasks 6-8: Frontend implementation
### Low Priority (Polish and deployment)
- Tasks 9-14: Integration, testing, and cleanup
## Estimated Timeline
- **Phase 1-2**: 2-3 hours (Backend setup and API integration)
- **Phase 3**: 2-3 hours (Frontend development)
- **Phase 4-6**: 1-2 hours (Testing, deployment, and cleanup)
**Total Estimated Time**: 5-8 hours
## Success Criteria
- [x] Web app successfully makes POST requests to `https://findEthics-Atlas.hf.space/chat`
- [x] Valid API responses are displayed on the web page
- [x] UI is minimal and basic as requested
- [x] Chat functionality works with conversation history
- [x] App can be deployed as a Hugging Face space
- [x] Error handling is implemented for API failures
---
# Anonymous Chat Access Implementation Tasks
## Overview
Add anonymous chat functionality alongside existing authenticated access, allowing users to chat without creating an account while maintaining the option for registered users.
## Task List
### Phase 1: Backend Infrastructure
- [x] **Task 1: Update config.py with anonymous user settings**
- Add ANONYMOUS_ENABLED flag
- Add ANONYMOUS_RATE_LIMIT (messages per hour)
- Add ANONYMOUS_SESSION_TIMEOUT
- Add ANONYMOUS_MAX_MESSAGE_LENGTH
- **Status: COMPLETED**
- **Assignee: Backend Coder Agent**
- [x] **Task 2: Create anonymous session management functions in app.py**
- Generate anonymous user IDs (e.g., anon_<hash>)
- Implement session-based chat history storage
- Add session validation functions
- **Status: COMPLETED**
- **Assignee: Backend Coder Agent**
- [x] **Task 3: Update app.py index route to show choice page**
- Modify `/` route to show choice instead of redirect
- Handle authenticated user redirect
- **Status: COMPLETED**
- **Assignee: Backend Coder Agent**
- [x] **Task 4: Add /choose route for access mode selection**
- Create route handler
- Implement GET method for displaying choice page
- **Status: COMPLETED**
- **Assignee: Backend Coder Agent**
- [x] **Task 5: Add /anonymous route for anonymous chat interface**
- Create route for anonymous chat
- Set up anonymous session
- Render chat template with anonymous mode
- **Status: COMPLETED**
- **Assignee: Backend Coder Agent**
- [x] **Task 6: Update /api/chat endpoint to handle anonymous users**
- Detect anonymous vs authenticated users
- Handle session-based chat history for anonymous
- Skip MongoDB saves for anonymous users
- Implement different rate limiting
- **Status: COMPLETED**
- **Assignee: Backend Coder Agent**
- [x] **Task 7: Implement rate limiting for anonymous users**
- Track message count per session
- Use IP + session combo for tracking
- Return 429 errors when exceeded
- **Status: COMPLETED**
- **Assignee: Backend Coder Agent**
### Phase 2: Frontend Updates
- [x] **Task 8: Create choose.html template**
- Design landing page with two options
- "Chat Anonymously" button
- "Login/Register" section
- Include privacy notice
- **Status: COMPLETED**
- **Assignee: Frontend Coder Agent**
- [x] **Task 9: Update base.html to handle anonymous users**
- Conditional navigation for anonymous users
- Show "Anonymous User" instead of email
- Different logout/exit behavior
- **Status: COMPLETED**
- **Assignee: Frontend Coder Agent**
- [x] **Task 10: Update index.html for anonymous mode**
- Add session warning banner
- Include "Create Account" prompt
- Display anonymous user indicator
- **Status: COMPLETED**
- **Assignee: Frontend Coder Agent**
- [x] **Task 11: Update chat.js for anonymous mode support**
- Detect anonymous mode from page data
- Handle session expiry warnings
- Modify API calls for anonymous users
- Add upgrade prompts
- **Status: COMPLETED**
- **Assignee: Frontend Coder Agent**
- [x] **Task 12: Add CSS styles for choice page**
- Style choice buttons
- Add anonymous mode indicators
- Style session warnings
- **Status: COMPLETED**
- **Assignee: Frontend Coder Agent**
### Phase 3: Testing & Documentation
- [ ] **Task 13: Test anonymous chat functionality**
- Test anonymous chat flow
- Verify rate limiting
- Test session expiry
- Test switching between modes
- **Status: PENDING**
- **Assignee: Testing Agent**
- [ ] **Task 14: Update CLAUDE.md with anonymous feature**
- Document new architecture
- Add anonymous mode details
- Update configuration section
- **Status: PENDING**
- **Assignee: Documentation Agent**
- [ ] **Task 15: Update README.md**
- Add anonymous mode to features
- Document usage instructions
- Add configuration details
- **Status: PENDING**
- **Assignee: Documentation Agent**
## Implementation Order
1. Backend configuration (Tasks 1-2)
2. Core routes (Tasks 3-5)
3. API updates (Tasks 6-7)
4. Frontend templates (Tasks 8-10)
5. JavaScript updates (Task 11)
6. Styling (Task 12)
7. Testing (Task 13)
8. Documentation (Tasks 14-15)
## Notes
- Maintain backward compatibility with existing authenticated flow
- Anonymous sessions are temporary and not persisted to database
- Stricter rate limits for anonymous users to prevent abuse
- Clear privacy notices about session-only storage