@Master4Real is already working on this.

Since Nov 18, 2025.

https://github.com/Master4Real/The-Walt-Disney-Company-/issues/6

Project 5.0: APEX Velocity







body {
font-family: 'Inter', sans-serif;
background-color: #0F172A; /* slate-900 */
}
.gradient-bg {
background: linear-gradient(180deg, #1E293B 0%, #0F172A 100%); /* slate-800 to slate-900 */
}
.nav-icon {
transition: all 0.2s ease-in-out;
}
.nav-icon.active {
background-color: #0E7490; /* cyan-700 */
color: #FFFFFF;
}
.chart-container {
position: relative;
width: 100%;
max-width: 600px;
margin-left: auto;
margin-right: auto;
height: 300px;
max-height: 400px;
}
@media (min-width: 768px) {
.chart-container {
height: 350px;
}
}
.content-section {
display: none; /* Hidden by default */
}
.content-section.active {
display: block; /* Shown when active */
}

const mockAumData = {
labels: Array.from({length: 30}, (_, i) => `Day ${i + 1}`),
data: [
3.50, 3.52, 3.51, 3.55, 3.60, 3.58, 3.62, 3.65, 3.63, 3.70,
3.72, 3.71, 3.75, 3.78, 3.80, 3.82, 3.81, 3.79, 3.85, 3.88,
3.90, 3.92, 3.91, 3.85, 3.80, 3.75, 3.78, 3.76, 3.74, 3.77
]
};

let aumChartInstance = null;
let isApiLoading = false;

const loadingIndicator = document.getElementById('loading-indicator');
const resultsContainer = document.getElementById('results-container');
const errorContainer = document.getElementById('error-message');
const sourcesContainer = document.getElementById('sources-container');
const sourcesList = document.getElementById('sources-list');

function createChart() {
const ctx = document.getElementById('aumChart').getContext('2d');

const gradient = ctx.createLinearGradient(0, 0, 0, 400);
gradient.addColorStop(0, 'rgba(14, 165, 233, 0.5)'); // cyan-500
gradient.addColorStop(1, 'rgba(14, 165, 233, 0)');

aumChartInstance = new Chart(ctx, {
type: 'line',
data: {
labels: mockAumData.labels,
datasets: [{
label: 'AUM (in Trillions)',
data: mockAumData.data,
borderColor: '#06B6D4', // cyan-500
backgroundColor: gradient,
borderWidth: 2,
pointBackgroundColor: '#06B6D4',
pointRadius: 0,
pointHoverRadius: 6,
pointHoverBorderColor: '#0F172A',
pointHoverBorderWidth: 2,
tension: 0.3,
fill: true,
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: false,
grid: {
color: 'rgba(255, 255, 255, 0.1)',
borderColor: 'rgba(255, 255, 255, 0.1)'
},
ticks: {
color: '#94A3B8', // slate-400
callback: function(value) {
return '$' + value + 'T';
}
}
},
x: {
grid: {
display: false,
},
ticks: {
color: '#94A3B8', // slate-400
maxRotation: 0,
autoSkip: true,
maxTicksLimit: 7
}
}
},
plugins: {
legend: {
display: false
},
tooltip: {
enabled: true,
mode: 'index',
intersect: false,
backgroundColor: '#1E293B', // slate-800
titleColor: '#FFFFFF',
bodyColor: '#FFFFFF',
borderColor: '#334155', // slate-700
borderWidth: 1,
padding: 12,
displayColors: false,
callbacks: {
title: function(tooltipItems) {
return tooltipItems[0].label;
},
label: function(tooltipItem) {
return 'AUM: $' + tooltipItem.formattedValue + 'T';
}
}
}
},
interaction: {
mode: 'nearest',
axis: 'x',
intersect: false
}
}
});
}

function wrapChartLabels(chart) {
const maxLabelLength = 16;
chart.data.labels.forEach((label, index) => {
if (typeof label === 'string' && label.length > maxLabelLength) {
const words = label.split(' ');
const newLabel = [];
let currentLine = '';
words.forEach(word => {
if ((currentLine + word).length > maxLabelLength) {
newLabel.push(currentLine.trim());
currentLine = word + ' ';
} else {
currentLine += word + ' ';
}
});
newLabel.push(currentLine.trim());
chart.data.labels[index] = newLabel;
}
});
chart.update();
}

function showSection(sectionId, navId) {
const sections = document.querySelectorAll('.content-section');
sections.forEach(section => {
section.classList.remove('active');
});
document.getElementById(sectionId).classList.add('active');

const navIcons = document.querySelectorAll('.nav-icon');
navIcons.forEach(icon => {
icon.classList.remove('active', 'text-white');
icon.classList.add('text-slate-400');
});

const activeIcon = document.getElementById(navId);
activeIcon.classList.add('active', 'text-white');
activeIcon.classList.remove('text-slate-400');

if (sectionId === 'analytics-section' && !aumChartInstance) {
setTimeout(() => {
createChart();
}, 0);
}
}

function setLoading(isLoading) {
isApiLoading = isLoading;
if (isLoading) {
loadingIndicator.style.display = 'flex';
resultsContainer.style.display = 'none';
errorContainer.style.display = 'none';
sourcesContainer.style.display = 'none';
} else {
loadingIndicator.style.display = 'none';
}
}

function displayError(message) {
setLoading(false);
errorContainer.style.display = 'block';
errorContainer.textContent = `Error: ${message}`;
resultsContainer.style.display = 'none';
sourcesContainer.style.display = 'none';
}

function displayResults(text, sources = []) {
setLoading(false);
resultsContainer.style.display = 'block';
resultsContainer.textContent = text;
errorContainer.style.display = 'none';

sourcesList.innerHTML = '';
if (sources.length > 0) {
sourcesContainer.style.display = 'block';
sources.forEach(source => {
const li = document.createElement('li');
const a = document.createElement('a');
a.href = source.uri;
a.textContent = source.title || source.uri;
a.target = '_blank';
a.rel = 'noopener noreferrer';
a.className = "hover:underline";
li.appendChild(a);
sourcesList.appendChild(li);
});
} else {
sourcesContainer.style.display = 'none';
}
}

async function callGeminiApi(userQuery, systemPrompt = null, useSearch = false, retries = 3, delay = 1000) {
const apiKey = "";
const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`;

const payload = {
contents: [{ parts: [{ text: userQuery }] }],
};

if (useSearch) {
payload.tools = [{ "google_search": {} }];
}

if (systemPrompt) {
payload.systemInstruction = {
parts: [{ text: systemPrompt }]
};
}

for (let i = 0; i < retries; i++) {
try {
const response = await fetch(apiUrl, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload)
});

if (!response.ok) {
if (response.status === 429 || response.status === 500 || response.status === 503) {
throw new Error(`Retryable error: ${response.status}`);
}
const errorData = await response.json();
throw new Error(errorData.error?.message || `HTTP error! status: ${response.status}`);
}

const result = await response.json();
const candidate = result.candidates?.[0];

if (candidate && candidate.content?.parts?.[0]?.text) {
const text = candidate.content.parts[0].text;
let sources = [];
const groundingMetadata = candidate.groundingMetadata;

if (groundingMetadata && groundingMetadata.groundingAttributions) {
sources = groundingMetadata.groundingAttributions
.map(attribution => ({
uri: attribution.web?.uri,
title: attribution.web?.title,
}))
.filter(source => source.uri);
}
return { text, sources };
} else {
throw new Error("Invalid response structure from API.");
}
} catch (error) {
if (i === retries - 1) {
throw error;
}
await new Promise(res => setTimeout(res, delay * Math.pow(2, i)));
}
}
throw new Error("API call failed after all retries.");
}

async function handleMarketNews() {
if (isApiLoading) return;
setLoading(true);

const systemPrompt = "You are a world-class financial analyst. Provide a concise, single-paragraph summary of the top 3 most impactful financial market news stories for today. Focus on equities, bonds, and major economic indicators.";
const userQuery = "What are the top 3 financial market news stories today?";

try {
const { text, sources } = await callGeminiApi(userQuery, systemPrompt, true);
displayResults(text, sources);
} catch (error) {
displayError(error.message);
}
}

async function handleDraftReport() {
if (isApiLoading) return;

const notes = document.getElementById('chat-input').value;
if (!notes.trim()) {
displayError("Please enter some notes in the textarea before drafting a report.");
resultsContainer.style.display = 'none';
return;
}

setLoading(true);

const systemPrompt = "You are a professional financial report writer. Your task is to expand the following user-provided notes into a clear, professional, and well-structured report draft. Use formal language and organize the content logically with headings or bullet points as appropriate.";
const userQuery = `Expand these notes into a professional report draft:\n\n---\n${notes}\n---`;

try {
const { text, sources } = await callGeminiApi(userQuery, systemPrompt, false);
displayResults(text, sources);
} catch (error) {
displayError(error.message);
}
}

document.addEventListener('DOMContentLoaded', () => {
showSection('chat-section', 'nav-chat');

document.getElementById('analyze-news-btn').addEventListener('click', handleMarketNews);
document.getElementById('draft-report-btn').addEventListener('click', handleDraftReport);
});

- []()[]()_@Master4Real