Skip to content

Fix frontend dashboard pages with consistent styling and backend integration #161

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Feb 6, 2025
Merged

Fix frontend dashboard pages with consistent styling and backend integration #161

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
169 changes: 88 additions & 81 deletions src/frontend/ai_chatbot_dashboard_sidebar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,86 +1,93 @@
<html>
<head>
<script src="https://cdn.tailwindcss.com">
</script>
<script src="https://registry.npmmirror.com/vue/3.3.11/files/dist/vue.global.js">
</script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
</head>
<body class="bg-gray-900 text-white">
<div class="h-screen flex flex-col" id="app">
<div class="flex flex-col p-4 space-y-4">
<div class="relative">
<input class="w-full p-2 pl-10 bg-gray-800 text-white rounded-md focus:outline-none" placeholder="Search..." type="text"/>
<i class="fas fa-search absolute left-3 top-3 text-gray-400">
</i>
</div>
<div class="space-y-2">
<div class="flex items-center space-x-2">
<i class="fas fa-comments text-gray-400">
</i>
<span>
Chat
</span>
</div>
<div class="flex items-center space-x-2">
<i class="fas fa-user text-gray-400">
</i>
<span>
Characters
</span>
<span class="bg-purple-600 text-xs text-white px-2 py-1 rounded-md">
Pro
</span>
</div>
</div>
<div class="text-gray-500">
FOLDERS
</div>
<div class="flex items-center space-x-2">
<i class="fas fa-folder-plus text-gray-400">
</i>
</div>
<div class="text-gray-500">
CHATS
</div>
<div class="flex items-center justify-between p-2 bg-gray-800 rounded-md">
<span>
Hi
</span>
<div class="flex items-center space-x-2">
<i class="fas fa-pen text-gray-400">
</i>
<i class="fas fa-trash text-gray-400">
</i>
<i class="fas fa-download text-gray-400">
</i>
</div>
</div>
</div>
<div class="mt-auto p-4">
<div class="flex items-center space-x-2">
<img alt="User avatar" class="w-10 h-10 rounded-full" height="40" src="https://storage.googleapis.com/a1aa/image/7MeV1KheZZtWSUyfOWGuVkSm0umyIiAi7QlMteCEg5B4WUiQB.jpg" width="40"/>
<div>
<div>
Venice Guest
</div>
<div class="text-blue-400">
Learn about Venice
<head>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://registry.npmmirror.com/vue/3.3.11/files/dist/vue.global.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
</head>
<body class="bg-gray-900 text-white">
<div class="h-screen flex flex-col" id="app">
<div class="flex flex-col p-4 space-y-4">
<div class="relative">
<input class="w-full p-2 pl-10 bg-gray-800 text-white rounded-md focus:outline-none" placeholder="Search..." type="text"/>
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
</div>
<div class="space-y-2">
<div class="flex items-center space-x-2">
<i class="fas fa-comments text-gray-400"></i>
<span>Chat</span>
</div>
<div class="flex items-center space-x-2">
<i class="fas fa-user text-gray-400"></i>
<span>Characters</span>
<span class="bg-purple-600 text-xs text-white px-2 py-1 rounded-md">Pro</span>
</div>
</div>
<div class="text-gray-500">FOLDERS</div>
<div class="flex items-center space-x-2">
<i class="fas fa-folder-plus text-gray-400"></i>
</div>
<div class="text-gray-500">CHATS</div>
<div class="flex items-center justify-between p-2 bg-gray-800 rounded-md">
<span>Hi</span>
<div class="flex items-center space-x-2">
<i class="fas fa-pen text-gray-400"></i>
<i class="fas fa-trash text-gray-400"></i>
<i class="fas fa-download text-gray-400"></i>
</div>
</div>
</div>
<div class="text-blue-400">
Help &amp; Feedback
<div class="mt-auto p-4">
<div class="flex items-center space-x-2">
<img alt="User avatar" class="w-10 h-10 rounded-full" height="40" src="https://storage.googleapis.com/a1aa/image/7MeV1KheZZtWSUyfOWGuVkSm0umyIiAi7QlMteCEg5B4WUiQB.jpg" width="40"/>
<div>
<div>Venice Guest</div>
<div class="text-blue-400">Learn about Venice</div>
<div class="text-blue-400">Help & Feedback</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
const { createApp, ref } = Vue
createApp({
setup() {
return {}
}
}).mount('#app')
</script>
</body>
<script>
const { createApp, ref } = Vue;
createApp({
setup() {
const searchQuery = ref('');
const chats = ref([
{ id: 1, name: 'Chat 1', messages: [] },
{ id: 2, name: 'Chat 2', messages: [] }
]);

const addChat = () => {
const newChat = { id: chats.value.length + 1, name: `Chat ${chats.value.length + 1}`, messages: [] };
chats.value.push(newChat);
};

const deleteChat = (chatId) => {
chats.value = chats.value.filter(chat => chat.id !== chatId);
};

const downloadChat = (chatId) => {
const chat = chats.value.find(chat => chat.id === chatId);
if (chat) {
const blob = new Blob([JSON.stringify(chat)], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `${chat.name}.json`;
a.click();
URL.revokeObjectURL(url);
}
};

return {
searchQuery,
chats,
addChat,
deleteChat,
downloadChat
};
}
}).mount('#app');
</script>
</body>
</html>
133 changes: 73 additions & 60 deletions src/frontend/ai_chatbox_settings.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,64 +3,26 @@
<script src="https://registry.npmmirror.com/vue/3.3.11/files/dist/vue.global.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"></link>
<style>
body {
background-color: #0f172a;
color: #ffffff;
font-family: Arial, sans-serif;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
background-color: #1e293b;
}
.header a {
color: #ffffff;
text-decoration: none;
font-size: 1.25rem;
}
.sidebar {
width: 200px;
background-color: #1e293b;
padding: 1rem;
position: fixed;
top: 0;
bottom: 0;
left: 0;
}
.sidebar a {
display: block;
color: #ffffff;
text-decoration: none;
margin-bottom: 1rem;
}
.content {
margin-left: 220px;
padding: 1rem;
}
</style>
</head>
<body>
<div class="header">
<a href="index.html">Main Dashboard</a>
<body class="bg-gray-900 text-white">
<div class="header flex justify-between items-center p-4 bg-gray-800">
<a href="index.html" class="text-xl">Main Dashboard</a>
<div>
<i class="fas fa-share-alt text-white"></i>
<i class="fas fa-ellipsis-v text-white"></i>
</div>
</div>
<div class="sidebar">
<a href="admin_profile.html">Admin Profile</a>
<a href="ai_chatbox_settings.html">AI Chatbox Settings</a>
<a href="ai_code_review.html">AI Code Review</a>
<a href="c2_panel.html">C2 Panel</a>
<a href="chatbot_dashboard.html">Chatbot Dashboard</a>
<a href="feature_pages.html">Feature Pages</a>
<a href="settings.html">Settings</a>
<div class="sidebar w-64 bg-gray-800 p-4 fixed top-0 bottom-0 left-0">
<a href="admin_profile.html" class="block mb-4">Admin Profile</a>
<a href="ai_chatbox_settings.html" class="block mb-4">AI Chatbox Settings</a>
<a href="ai_code_review.html" class="block mb-4">AI Code Review</a>
<a href="c2_panel.html" class="block mb-4">C2 Panel</a>
<a href="chatbot_dashboard.html" class="block mb-4">Chatbot Dashboard</a>
<a href="feature_pages.html" class="block mb-4">Feature Pages</a>
<a href="settings.html" class="block mb-4">Settings</a>
</div>
<div id="app" class="content">
<div class="text-center text-white text-2xl mb-4">Settings</div>
<div id="app" class="content ml-64 p-4">
<div class="text-center text-2xl mb-4">Settings</div>
<div class="flex justify-center space-x-4 mb-4">
<div class="text-gray-400">Text</div>
<div class="text-gray-400">Image</div>
Expand All @@ -69,38 +31,89 @@
</div>
<div class="border-b border-gray-600 mb-4"></div>
<div class="mb-4">
<div class="text-white text-lg mb-2">Model</div>
<div class="text-lg mb-2">Model</div>
<div class="flex items-center justify-between bg-gray-800 p-2 rounded">
<span class="text-gray-400">Selected Model</span>
<div class="flex items-center space-x-2">
<span class="text-white">Llama 3.3 70B</span>
<i class="fas fa-chevron-down text-white"></i>
<span>Llama 3.3 70B</span>
<i class="fas fa-chevron-down"></i>
</div>
</div>
</div>
<div class="mb-4">
<div class="text-white text-lg mb-2">System Prompt</div>
<div class="text-lg mb-2">System Prompt</div>
<div class="flex items-center justify-between bg-gray-800 p-2 rounded">
<span class="text-gray-400">Control the AI's reality. Create a System Prompt to command how the AI behaves.</span>
<button class="bg-blue-500 text-white px-2 py-1 rounded">+ Add</button>
<button class="bg-blue-500 px-2 py-1 rounded">+ Add</button>
</div>
</div>
<div class="mb-4">
<div class="text-white text-lg mb-2">Advanced Settings</div>
<div class="text-lg mb-2">Advanced Settings</div>
<div class="flex items-center justify-between bg-gray-800 p-2 rounded">
<span class="text-gray-400">Advanced Settings</span>
<i class="fas fa-chevron-down text-white"></i>
<i class="fas fa-chevron-down"></i>
</div>
</div>
<div class="flex justify-center">
<button class="bg-gray-700 text-white px-4 py-2 rounded">Reset to Default</button>
<button class="bg-gray-700 px-4 py-2 rounded">Reset to Default</button>
</div>
<div class="mt-4">
<form @submit.prevent="saveSettings">
<div class="mb-4">
<label for="model" class="block text-lg mb-2">Model</label>
<select id="model" v-model="settings.model" class="w-full p-2 bg-gray-800 rounded">
<option value="Llama 3.3 70B">Llama 3.3 70B</option>
<option value="GPT-3">GPT-3</option>
<option value="BERT">BERT</option>
</select>
</div>
<div class="mb-4">
<label for="systemPrompt" class="block text-lg mb-2">System Prompt</label>
<textarea id="systemPrompt" v-model="settings.systemPrompt" class="w-full p-2 bg-gray-800 rounded"></textarea>
</div>
<div class="mb-4">
<label for="advancedSettings" class="block text-lg mb-2">Advanced Settings</label>
<textarea id="advancedSettings" v-model="settings.advancedSettings" class="w-full p-2 bg-gray-800 rounded"></textarea>
</div>
<div class="flex justify-center">
<button type="submit" class="bg-blue-500 px-4 py-2 rounded">Save Settings</button>
</div>
</form>
</div>
</div>
<script>
const { createApp, ref } = Vue;
createApp({
setup() {
return {};
const settings = ref({
model: 'Llama 3.3 70B',
systemPrompt: '',
advancedSettings: ''
});

const saveSettings = async () => {
try {
const response = await fetch('/api/save-settings', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(settings.value)
});
if (!response.ok) {
throw new Error('Failed to save settings');
}
alert('Settings saved successfully');
} catch (error) {
console.error(error);
alert('Error saving settings');
}
};

return {
settings,
saveSettings
};
}
}).mount('#app');
</script>
Expand Down
Loading
Loading