operations-granite/HuggingFace-Granite-AI-Practice-Agent-Dev

1# Quick Start Guide2 3## What's New? 🎉4 5Your HF Space now has:6- ✅ **File upload support** (PDF, DOCX, XLSX, PPTX, TXT)7- ✅ **Enhanced chat UI** with markdown rendering8- ✅ **Code syntax highlighting**9- ✅ **Document type detection** (RFP, Meeting Notes, etc.)10- ✅ **Beautiful, responsive interface**11 12## Test Locally (Fastest Way)13 14### 1. Set Up Environment15 16```bash17cd hf_space/18 19# Create .env file20cat > .env << EOF21GOOGLE_API_KEY=your_api_key_here22DATABASE_URL=your_postgres_url_here  # Optional23GEMINI_MODEL=gemini-2.5-flash-preview-09-202524EOF25```26 27### 2. Install Dependencies28 29```bash30pip install -r backend/requirements.txt31```32 33### 3. Run the Server34 35```bash36cd backend37python main.py38```39 40Or with auto-reload:41 42```bash43uvicorn backend.main:app --host 0.0.0.0 --port 7860 --reload44```45 46### 4. Open in Browser47 48Go to: **http://localhost:7860**49 50## Test the Features51 52### Test 1: Basic Chat531. Open http://localhost:7860542. Type: "What can you help me with?"553. Click Send564. You should see AI response with nice formatting57 58### Test 2: File Upload591. Click "📎 Choose File"602. Select a PDF or DOCX file613. Wait for upload (you'll see document info)624. Type: "Summarize this document"635. Click Send646. AI will analyze your document!65 66### Test 3: Markdown & Code671. Type: "Show me Python code to calculate factorial"682. You should see syntax-highlighted code69 70## Deploy to Hugging Face Spaces71 72### 1. Push to GitHub73 74```bash75# Make sure you're in hf_space branch76git add .77git commit -m "feat: Add chat with file upload support"78git push origin huggingface-deploy79```80 81### 2. Create HF Space82 831. Go to https://huggingface.co/new-space842. Name: `granite-rfp-assistant`853. **SDK: Docker** ← Important!864. Visibility: Your choice875. Click "Create Space"88 89### 3. Link to GitHub90 91In your HF Space:921. Settings → "Repository" tab932. Select "Link to GitHub"943. Repository: `your-username/AI-Practice-Agent`954. Branch: `huggingface-deploy`965. Path: `hf_space`97 98### 4. Add Secrets99 100In HF Space Settings → "Variables and secrets":101 102```103GOOGLE_API_KEY = your_google_api_key104DATABASE_URL = your_postgres_url  # Optional105GEMINI_MODEL = gemini-2.5-flash-preview-09-2025  # Optional106```107 108### 5. Wait for Build109 110- HF will automatically build from Dockerfile111- Takes ~5-10 minutes112- Check "Logs" tab for progress113 114### 6. Done! 🎉115 116Your app will be live at:117`https://huggingface.co/spaces/YOUR_USERNAME/granite-rfp-assistant`118 119## Troubleshooting120 121### "ModuleNotFoundError: No module named 'agent'"122 123**Fix:** Make sure you're running from `hf_space/backend/` directory:124 125```bash126cd hf_space/backend127python main.py128```129 130### "No response from agent"131 132**Check:**1331. Is `GOOGLE_API_KEY` set correctly?1342. Check backend console for errors1353. Open browser DevTools (F12) → Console tab136 137### "File upload fails"138 139**Check:**1401. File size < 15MB1412. Supported format (PDF, DOCX, XLSX, PPTX, TXT)1423. Check backend logs for extraction errors143 144### Docker Build Fails on HF145 146**Check:**1471. `Dockerfile` is in `hf_space/` directory1482. `backend/` and `frontend/` folders exist1493. `requirements.txt` has all dependencies1504. Check HF Space logs for specific error151 152## Architecture153 154```155hf_space/156├── Dockerfile                 # Docker config for HF Spaces157├── README.md                  # HF Space metadata158├── backend/159│   ├── main.py               # FastAPI app (✨ NEW: file upload!)160│   ├── requirements.txt      # Python dependencies161│   └── agent/                # Your AI agent code162└── frontend/163    └── index.html            # ✨ NEW: Enhanced UI with upload!164```165 166## API Endpoints167 168### `GET /`169Serves the frontend170 171### `GET /health`172Health check173 174### `POST /upload`175Upload and process document176- Input: multipart/form-data with `file`177- Output: `{ status, filename, document_type, text, text_preview }`178 179### `POST /chat`180Send message to agent181- Input: `{ message, user_id, session_id, document_text?, document_type?, filename? }`182- Output: `{ response, session_id }`183 184## Next Steps185 186Want to add more features? Check out [streamlit_app/components/chat.py](../streamlit_app/components/chat.py) for:187- Voice input (Web Audio API)188- Image generation display189- Session history190- Authentication191 192Happy coding! 🚀193