Skip to content

FE | Feat | Enhance Homepage to Dynamically Render Feature Cards from Backend Data #51

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

Open
Ashrithashankar21 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

FE | Feat | Enhance Homepage to Dynamically Render Feature Cards from Backend Data #51

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fe0a7c7
feat: src: add dynamic cards
Ashrithashankar21 Aug 25, 2025
c7f7d34
feat: src: add dynamic cards
Ashrithashankar21 Aug 25, 2025
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
154 changes: 23 additions & 131 deletions src/user_interfaces/simple_html_chat_ui/web_files/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,139 +11,31 @@
<body>
<div id="startup-overlay">
<div class="startup-content">
<div class="startup-logo">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M12 2L2 7l10 5 10-5-10-5z" />
<path d="M2 17l10 5 10-5" />
<path d="M2 12l10 5 10-5" />
</svg>
</div>
<h1 class="startup-title">LabVIEW LLM Chat Interface</h1>
<p class="startup-subtitle">
Interact with AI models through a clean and intuitive interface
designed for LabVIEW integration.
</p>
<div class="startup-features">
<div class="startup-container">
<div class="feature-item">
<div class="feature-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="10"></circle>
<line x1="2" y1="12" x2="22" y2="12"></line>
<path
d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"
></path>
</svg>
</div>
<div class="feature-text">
<h3>Multiple AI Models</h3>
<p>
Connect to various LLM models including OpenAI, Gemini,
Anthropic, and more
</p>
</div>
</div>
<div class="feature-item">
<div class="feature-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="4 17 10 11 4 5"></polyline>
<line x1="12" y1="19" x2="20" y2="19"></line>
</svg>
</div>
<div class="feature-text">
<h3>Source Citations</h3>
<p>
Get detailed references and clickable sources with AI
responses
</p>
</div>
</div>
</div>
<div class="startup-container">
<div class="feature-item">
<div class="feature-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
<line x1="8" y1="21" x2="16" y2="21"></line>
<line x1="12" y1="17" x2="12" y2="21"></line>
</svg>
</div>
<div class="feature-text">
<h3>LabVIEW Integration</h3>
<p>
Seamlessly connects with LabVIEW applications and workflows
</p>
</div>
</div>
<div class="feature-item">
<div class="feature-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
</svg>
</div>
<div class="feature-text">
<h3>Session Management</h3>
<p>
Create and manage conversation sessions with persistent
history
</p>
</div>
</div>
<div class="header">
<div class="startup-logo">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M12 2L2 7l10 5 10-5-10-5z" />
<path d="M2 17l10 5 10-5" />
<path d="M2 12l10 5 10-5" />
</svg>
</div>
<h1 class="startup-title">LabVIEW LLM Chat Interface</h1>
<p class="startup-subtitle">
Interact with AI models through a clean and intuitive interface
designed for LabVIEW integration.
</p>
</div>
<div class="startup-features" id="startup-features"></div>
<div class="chat-input-home-page">
<input
type="text"
Expand Down
36 changes: 33 additions & 3 deletions src/user_interfaces/simple_html_chat_ui/web_files/scripts/webSocket.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,28 @@
// Render features on homepage
function renderFeatures(features) {
// Only use the first 4 features
const featuresContainer = document.getElementById("startup-features");
if (!featuresContainer) return;
featuresContainer.innerHTML = "";
const limited = features.slice(0, 4);
for (let i = 0; i < limited.length; i += 2) {
const group = limited.slice(i, i + 2);
const containerDiv = document.createElement("div");
containerDiv.className = "startup-container";
group.forEach((f) => {
const featureDiv = document.createElement("div");
featureDiv.className = "feature-item";
featureDiv.innerHTML = `
<div class="feature-text">
<h3 title="${f.title}">${f.title}</h3>
<p title="${f.description}">${f.description}</p>
</div>
`;
containerDiv.appendChild(featureDiv);
});
featuresContainer.appendChild(containerDiv);
}
}
const chatMessages = document.getElementById("chatMessages");

function scrollToBottom() {
Expand Down Expand Up @@ -77,7 +102,12 @@ function connectWebSocket() {
hideTyping();
try {
const data = JSON.parse(event.data);
addMessageToChatbox("Assistant", data.message, data.source);
// Listen for 'feature' event type
if (data.event === "feature" && Array.isArray(data.features)) {
renderFeatures(data.features);
} else {
addMessageToChatbox("Assistant", data.message, data.source);
}
} catch (e) {
console.warn("Received non-JSON message:", e);
addMessageToChatbox("Assistant", event.data);
Expand Down Expand Up @@ -199,7 +229,7 @@ function sendMessage(question = "") {
if (socket?.readyState === WebSocket.OPEN) {
try {
console.log("Sending message:", text);
socket.send(JSON.stringify({"key":"User Prompt","data":text}));
socket.send(JSON.stringify({ key: "User Prompt", data: text }));
showTyping();
} catch (error) {
console.error("Send error:", error);
Expand Down Expand Up @@ -263,7 +293,7 @@ if (clearChatButton) {
clearChatButton.addEventListener("click", () => {
chatMessages.innerHTML = "";
appendSystemMessage("Chat history cleared");
socket.send(JSON.stringify({"key":"Clear History","data":""}));
socket.send(JSON.stringify({ key: "Clear History", data: "" }));
});
}

Expand Down
Loading