Fix: Resolve broken image display by correcting file paths and adding CSS styling

backend/controllers/ai.js

@@ -1,5 +1,6 @@
 const axios = require('axios');
 const fs = require('fs');
+const path = require('path');
 const { Client } = require('@gradio/client');
 const User = require('../models/User');
 const ChatSession = require('../models/ChatSession');
@@ -168,12 +169,14 @@ exports.chat = asyncHandler(async (req, res, next) => {
                                 timeout: 30000 
                             }
                         );
-            const filename = `vision-${Date.now()}.png`;
-            const filepath = `./public/uploads/${filename}`;
-            if (!fs.existsSync('./public/uploads')) fs.mkdirSync('./public/uploads', { recursive: true });
-            fs.writeFileSync(filepath, response.data);
-            const imageUrl = `/uploads/${filename}`;
-            const aiResponse = `[VISUAL_PROJECTION_COMPLETE]\n\n![Generated Image](${imageUrl})`;
+                    const filename = `vision-${Date.now()}.png`;
+                    const uploadsDir = path.join(__dirname, '..', 'public', 'uploads');
+                    const filepath = path.join(uploadsDir, filename);
+                    
+                    if (!fs.existsSync(uploadsDir)) fs.mkdirSync(uploadsDir, { recursive: true });
+                    
+                    fs.writeFileSync(filepath, response.data);
+                    const imageUrl = `/uploads/${filename}`;            const aiResponse = `[VISUAL_PROJECTION_COMPLETE]\n\n![Generated Image](${imageUrl})`;
 
             await Message.create({ sessionId: session._id, sender: 'user', content: message, attachmentUrl: '' });
             await Message.create({ sessionId: session._id, sender: 'ai', content: aiResponse, modelUsed: activeModelName });

backend/public/chat.html

@@ -60,6 +60,7 @@
         .ai .status-dot { background: #22c55e; box-shadow: 0 0 10px #22c55e; }
 
         .prose { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.9); overflow-wrap: break-word; word-break: break-word; }
+        .prose img { max-width: 100%; height: auto; border-radius: 1rem; border: 1px solid var(--border); margin: 1rem 0; box-shadow: 0 10px 30px rgba(0,0,0,0.5); cursor: zoom-in; display: block; }
         .prose pre { background: rgba(0,0,0,0.5) !important; padding: 1rem !important; border-radius: 1rem !important; border: 1px solid var(--border) !important; margin: 1rem 0 !important; overflow-x: auto !important; position: relative; }
         .prose table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 12px; }
         .prose th, .prose td { border: 1px solid var(--border); padding: 8px; text-align: left; }