|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>AI Code Assistant</title> |
|
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com"> |
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet"> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css"> |
|
|
|
|
|
<style> |
|
|
:root { |
|
|
--font-family: 'Poppins', sans-serif; |
|
|
--background-primary: #1e1e2e; |
|
|
--background-secondary: #27293d; |
|
|
--background-tertiary: #3b3d5b; |
|
|
--text-primary: #cdd6f4; |
|
|
--text-secondary: #a6adc8; |
|
|
--primary-color: #89b4fa; |
|
|
--accent-color: #f5c2e7; |
|
|
--success-color: #a6e3a1; |
|
|
--error-color: #f38ba8; |
|
|
--border-color: #45475a; |
|
|
} |
|
|
* { margin: 0; padding: 0; box-sizing: border-box; } |
|
|
body { font-family: var(--font-family); background-color: var(--background-primary); color: var(--text-primary); display: flex; height: 100vh; overflow: hidden; } |
|
|
::-webkit-scrollbar { width: 8px; } |
|
|
::-webkit-scrollbar-track { background: var(--background-secondary); } |
|
|
::-webkit-scrollbar-thumb { background-color: var(--background-tertiary); border-radius: 10px; } |
|
|
::-webkit-scrollbar-thumb:hover { background-color: var(--primary-color); } |
|
|
.container { display: flex; width: 100%; height: 100%; } |
|
|
.sidebar { display: flex; flex-direction: column; background-color: var(--background-secondary); border-right: 1px solid var(--border-color); padding: 20px; height: 100vh; transition: width 0.3s ease; } |
|
|
.left-sidebar { width: 20%; min-width: 250px; } |
|
|
.right-sidebar { width: 25%; min-width: 300px; border-right: none; border-left: 1px solid var(--border-color); } |
|
|
.sidebar-header { display: flex; align-items: center; gap: 12px; padding-bottom: 15px; border-bottom: 1px solid var(--border-color); margin-bottom: 15px; flex-shrink: 0; } |
|
|
.sidebar-header i { color: var(--primary-color); font-size: 1.2rem; } |
|
|
.sidebar-header h2 { font-size: 1.1rem; font-weight: 500; } |
|
|
.sidebar-content { flex-grow: 1; overflow-y: auto; } |
|
|
.sidebar-footer { flex-shrink: 0; padding-top: 15px; border-top: 1px solid var(--border-color); } |
|
|
#file-tree div { padding: 8px 12px; cursor: pointer; border-radius: 6px; margin-bottom: 4px; transition: background-color 0.2s ease, color 0.2s ease; font-size: 0.9rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } |
|
|
#file-tree div:hover { background-color: var(--background-tertiary); color: var(--text-primary); } |
|
|
#file-tree div.active { background-color: var(--primary-color); color: var(--background-primary); font-weight: 500; } |
|
|
#file-content-display { background-color: #161625; border-radius: 8px; height: 100%; padding: 15px; font-size: 0.85rem; line-height: 1.6; } |
|
|
#file-content-display code { font-family: 'Fira Code', 'Courier New', monospace; } |
|
|
.main-content { flex-grow: 1; display: flex; flex-direction: column; padding: 0; height: 100vh; } |
|
|
#upload-section { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; text-align: center; padding: 20px; } |
|
|
.upload-box { background: var(--background-secondary); padding: 40px; border-radius: 12px; border: 1px dashed var(--border-color); width: 90%; max-width: 500px; } |
|
|
.upload-icon { font-size: 3rem; color: var(--primary-color); margin-bottom: 20px; } |
|
|
.upload-box h2 { font-size: 1.8rem; margin-bottom: 10px; } |
|
|
.upload-box p { color: var(--text-secondary); margin-bottom: 30px; } |
|
|
.upload-label { background-color: var(--primary-color); color: var(--background-primary); padding: 12px 20px; border-radius: 8px; cursor: pointer; display: inline-block; font-weight: 600; transition: background-color 0.2s ease; } |
|
|
.upload-label:hover { background-color: var(--accent-color); } |
|
|
.upload-label i { margin-right: 8px; } |
|
|
.file-name { margin-top: 15px; color: var(--success-color); font-weight: 500; } |
|
|
#progress-indicator { display: none; } |
|
|
#progress-indicator p { margin-bottom: 15px; font-size: 1.1rem; } |
|
|
.loader { border: 4px solid var(--background-tertiary); border-radius: 50%; border-top: 4px solid var(--primary-color); width: 50px; height: 50px; animation: spin 1.5s linear infinite; margin: 20px auto; } |
|
|
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } |
|
|
#chat-section { display: none; flex-direction: column; height: 100%; background-color: var(--background-primary); } |
|
|
#chat-window { flex-grow: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 20px; } |
|
|
.message { padding: 12px 18px; border-radius: 18px; max-width: 85%; line-height: 1.6; word-wrap: break-word; } |
|
|
.user-message { background-color: var(--primary-color); color: var(--background-primary); border-bottom-right-radius: 4px; align-self: flex-end; } |
|
|
.ai-message { background-color: var(--background-secondary); color: var(--text-primary); border-bottom-left-radius: 4px; align-self: flex-start; } |
|
|
.ai-message.error-message { background-color: var(--error-color); color: var(--background-primary); } |
|
|
.ai-message pre { background-color: var(--background-primary); border: 1px solid var(--border-color); border-radius: 8px; padding: 15px; margin-top: 10px; font-size: 0.85rem; white-space: pre-wrap; } |
|
|
.ai-message code { font-family: 'Fira Code', 'Courier New', monospace; } |
|
|
.chat-input-area { display: flex; align-items: center; padding: 15px 20px; border-top: 1px solid var(--border-color); flex-shrink: 0; } |
|
|
#message-input { flex-grow: 1; background-color: var(--background-secondary); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 10px; padding: 12px 15px; resize: none; font-family: var(--font-family); font-size: 1rem; line-height: 1.5; max-height: 200px; overflow-y: auto; } |
|
|
#message-input:focus { outline: none; border-color: var(--primary-color); } |
|
|
#send-btn, #download-btn { background-color: transparent; border: none; color: var(--primary-color); font-size: 1.5rem; cursor: pointer; transition: color 0.2s ease; padding: 10px; margin-left: 10px; } |
|
|
#send-btn:hover { color: var(--accent-color); } |
|
|
#download-btn { width: 100%; background-color: var(--primary-color); color: var(--background-primary); display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 1rem; font-weight: 600; border-radius: 8px; padding: 12px; } |
|
|
#download-btn:hover { background-color: var(--accent-color); color: var(--background-primary); } |
|
|
#download-btn i { font-size: 1.1rem; } |
|
|
.empty-state { color: var(--text-secondary); padding: 20px; text-align: center; } |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<div class="sidebar left-sidebar"> |
|
|
<div class="sidebar-header"><i class="fa-solid fa-folder-tree"></i><h2>Project Files</h2></div> |
|
|
<div id="file-tree" class="sidebar-content"> |
|
|
<div class="empty-state">No project files. Upload a project first.</div> |
|
|
</div> |
|
|
<div class="sidebar-footer"><button id="download-btn"><i class="fa-solid fa-download"></i><span>Download Project</span></button></div> |
|
|
</div> |
|
|
<div class="main-content"> |
|
|
<div id="upload-section"> |
|
|
<div class="upload-box"> |
|
|
<i class="fa-solid fa-rocket upload-icon"></i> |
|
|
<h2>AI Code Assistant</h2> |
|
|
<p>Upload a .zip project file to begin analyzing and improving your code.</p> |
|
|
<form id="upload-form" enctype="multipart/form-data"> |
|
|
<label for="project-zip" class="upload-label"><i class="fa-solid fa-paperclip"></i><span>Choose a .zip file...</span></label> |
|
|
<input type="file" id="project-zip" name="project_zip" accept=".zip" hidden> |
|
|
<button type="submit" id="upload-button" style="display: none;">Upload</button> |
|
|
</form> |
|
|
<p id="file-name-display" class="file-name"></p> |
|
|
</div> |
|
|
<div id="progress-indicator"><p>AI is analyzing your project...</p><div class="loader"></div></div> |
|
|
</div> |
|
|
<div id="chat-section"> |
|
|
<div id="chat-window"></div> |
|
|
<div class="chat-input-area"> |
|
|
<textarea id="message-input" placeholder="Ask the AI to refactor, explain, or improve your code..." rows="1"></textarea> |
|
|
<button id="send-btn"><i class="fa-solid fa-paper-plane"></i></button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="sidebar right-sidebar"> |
|
|
<div class="sidebar-header"><i class="fa-solid fa-file-lines"></i><h2>File Content</h2></div> |
|
|
<div class="sidebar-content"><pre id="file-content-display"><code class="plaintext">Select a file from the left to view its content.</code></pre></div> |
|
|
</div> |
|
|
</div> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script> |
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const ui = { |
|
|
uploadForm: document.getElementById('upload-form'), |
|
|
progressIndicator: document.getElementById('progress-indicator'), |
|
|
chatSection: document.getElementById('chat-section'), |
|
|
uploadSection: document.getElementById('upload-section'), |
|
|
uploadBox: document.querySelector('.upload-box'), |
|
|
chatWindow: document.getElementById('chat-window'), |
|
|
messageInput: document.getElementById('message-input'), |
|
|
sendBtn: document.getElementById('send-btn'), |
|
|
fileTree: document.getElementById('file-tree'), |
|
|
fileContentDisplay: document.querySelector('#file-content-display code'), |
|
|
downloadBtn: document.getElementById('download-btn'), |
|
|
projectZipInput: document.getElementById('project-zip'), |
|
|
fileNameDisplay: document.getElementById('file-name-display'), |
|
|
uploadButton: document.getElementById('upload-button'), |
|
|
}; |
|
|
|
|
|
const handleApiError = (message) => { |
|
|
appendMessage('assistant', message, true); |
|
|
}; |
|
|
|
|
|
const fetchApi = async (url, options) => { |
|
|
try { |
|
|
const response = await fetch(url, options); |
|
|
if (!response.ok) { |
|
|
throw new Error(`HTTP error! status: ${response.status}`); |
|
|
} |
|
|
const data = await response.json(); |
|
|
if (data.error) { |
|
|
handleApiError(data.error); |
|
|
return null; |
|
|
} |
|
|
return data; |
|
|
} catch (error) { |
|
|
handleApiError('Failed to connect to the backend. Please ensure it is running.'); |
|
|
console.error('API Error:', error); |
|
|
return null; |
|
|
} |
|
|
}; |
|
|
|
|
|
const uploadProject = async (formData) => { |
|
|
ui.uploadBox.style.display = 'none'; |
|
|
ui.progressIndicator.style.display = 'block'; |
|
|
const data = await fetchApi('/upload', { |
|
|
method: 'POST', |
|
|
body: formData |
|
|
}); |
|
|
|
|
|
ui.progressIndicator.style.display = 'none'; |
|
|
if (data) { |
|
|
ui.uploadSection.style.display = 'none'; |
|
|
ui.chatSection.style.display = 'flex'; |
|
|
updateFileTree(data.file_tree); |
|
|
ui.chatWindow.innerHTML = ''; |
|
|
|
|
|
if (data.chat_history && data.chat_history.length > 0) { |
|
|
data.chat_history.forEach(msg => { |
|
|
appendMessage(msg.role === 'user' ? 'user' : 'assistant', msg.content); |
|
|
}); |
|
|
} |
|
|
} else { |
|
|
ui.uploadBox.style.display = 'block'; |
|
|
} |
|
|
}; |
|
|
|
|
|
const sendMessage = async () => { |
|
|
const message = ui.messageInput.value.trim(); |
|
|
if (!message) return; |
|
|
|
|
|
appendMessage('user', message); |
|
|
ui.messageInput.value = ''; |
|
|
ui.messageInput.style.height = 'auto'; |
|
|
|
|
|
const data = await fetchApi('/chat', { |
|
|
method: 'POST', |
|
|
headers: { 'Content-Type': 'application/json' }, |
|
|
body: JSON.stringify({ message }) |
|
|
}); |
|
|
|
|
|
if (data && data.reply) { |
|
|
appendMessage('assistant', data.reply); |
|
|
updateFileTree(); |
|
|
} |
|
|
}; |
|
|
|
|
|
const appendMessage = (sender, text, isError = false) => { |
|
|
const messageElement = document.createElement('div'); |
|
|
messageElement.classList.add('message', sender === 'user' ? 'user-message' : 'ai-message'); |
|
|
if (isError) messageElement.classList.add('error-message'); |
|
|
|
|
|
let html = text.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">"); |
|
|
html = html.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>'); |
|
|
html = html.replace(/`([^`]+)`/g, '<code>$1</code>'); |
|
|
html = html.replace(/```(\w+)?\n([\s\S]*?)```/g, (match, lang, code) => { |
|
|
const trimmedCode = code.trim(); |
|
|
const highlighted = hljs.highlight(trimmedCode, { |
|
|
language: lang || 'plaintext', |
|
|
ignoreIllegals: true |
|
|
}).value; |
|
|
return `<pre><code class="hljs ${lang}">${highlighted}</code></pre>`; |
|
|
}); |
|
|
|
|
|
messageElement.innerHTML = html.replace(/\n/g, '<br>'); |
|
|
ui.chatWindow.appendChild(messageElement); |
|
|
ui.chatWindow.scrollTop = ui.chatWindow.scrollHeight; |
|
|
}; |
|
|
|
|
|
const updateFileTree = async () => { |
|
|
const data = await fetchApi('/file_tree'); |
|
|
ui.fileTree.innerHTML = ''; |
|
|
|
|
|
if (data && data.file_tree && data.file_tree.length > 0) { |
|
|
const activeFilePath = document.querySelector('#file-tree .active')?.dataset.path; |
|
|
|
|
|
data.file_tree.forEach(path => { |
|
|
const fileElement = document.createElement('div'); |
|
|
fileElement.textContent = path; |
|
|
fileElement.dataset.path = path; |
|
|
fileElement.addEventListener('click', () => { |
|
|
document.querySelectorAll('#file-tree div').forEach(el => el.classList.remove('active')); |
|
|
fileElement.classList.add('active'); |
|
|
fetchFileContent(path); |
|
|
}); |
|
|
if (path === activeFilePath) fileElement.classList.add('active'); |
|
|
ui.fileTree.appendChild(fileElement); |
|
|
}); |
|
|
} else { |
|
|
const emptyMessage = document.createElement('div'); |
|
|
emptyMessage.textContent = 'No project files. Upload a project first.'; |
|
|
emptyMessage.classList.add('empty-state'); |
|
|
ui.fileTree.appendChild(emptyMessage); |
|
|
} |
|
|
}; |
|
|
|
|
|
const fetchFileContent = async (path) => { |
|
|
const data = await fetchApi(`/file_content?path=${encodeURIComponent(path)}`); |
|
|
if (data && data.content) { |
|
|
ui.fileContentDisplay.textContent = data.content; |
|
|
hljs.highlightElement(ui.fileContentDisplay); |
|
|
} else { |
|
|
ui.fileContentDisplay.textContent = data?.error || 'Could not load file content.'; |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
ui.projectZipInput.addEventListener('change', () => { |
|
|
if (ui.projectZipInput.files.length > 0) { |
|
|
ui.fileNameDisplay.textContent = `Selected: ${ui.projectZipInput.files[0].name}`; |
|
|
ui.uploadButton.click(); |
|
|
} |
|
|
}); |
|
|
|
|
|
ui.uploadForm.addEventListener('submit', (e) => { |
|
|
e.preventDefault(); |
|
|
uploadProject(new FormData(ui.uploadForm)); |
|
|
}); |
|
|
|
|
|
ui.sendBtn.addEventListener('click', sendMessage); |
|
|
|
|
|
ui.messageInput.addEventListener('keypress', (e) => { |
|
|
if (e.key === 'Enter' && !e.shiftKey) { |
|
|
e.preventDefault(); |
|
|
sendMessage(); |
|
|
} |
|
|
}); |
|
|
|
|
|
ui.downloadBtn.addEventListener('click', () => { |
|
|
window.location.href = '/download'; |
|
|
}); |
|
|
|
|
|
ui.messageInput.addEventListener('input', function() { |
|
|
this.style.height = 'auto'; |
|
|
this.style.height = (this.scrollHeight) + 'px'; |
|
|
}); |
|
|
|
|
|
|
|
|
updateFileTree(); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
