diff --git a/Folien/AISE502_Projekt_Folien.pdf b/Folien/AISE502_Projekt_Folien.pdf index 1a8640c..1451f60 100644 Binary files a/Folien/AISE502_Projekt_Folien.pdf and b/Folien/AISE502_Projekt_Folien.pdf differ diff --git a/Folien/AISE502_Projekt_Folien.tex b/Folien/AISE502_Projekt_Folien.tex index 03c7cb5..5c15c5a 100644 --- a/Folien/AISE502_Projekt_Folien.tex +++ b/Folien/AISE502_Projekt_Folien.tex @@ -206,7 +206,7 @@ The next frames show \textbf{low-fidelity sketches} of the platform from the use \vspace{0.15cm} \begin{hinweisbox} -\footnotesize The sketches are in the course repository as HTML pages (\texttt{project\_exercise/ui\_sketches/}) -- open them in a browser; your own screens may look entirely different, as long as the requirements behind the notes are met. +\footnotesize The sketches are Section 8 of the exercise sheet and, as HTML pages, in the course repository (\texttt{project\_exercise/ui\_sketches/}) -- open them in a browser; your own screens may look entirely different, as long as the requirements behind the notes are met. \end{hinweisbox} \end{frame} @@ -638,7 +638,7 @@ M6 Presentation and architecture defence & 14 & present the system, defend the t \begin{frame}{Read the document -- then kick off milestone M1} \begin{projektbox} -\footnotesize \textbf{Read the exercise sheet in full before the kickoff}: \texttt{project\_exercise/project\_exercise.pdf} (ten pages). Suggested order: Section 1 (goal, the single most important rule) $\to$ 5 (mandatory vs.\ distinction) $\to$ 6 (plan, milestones) $\to$ 2--4 (requirements, architecture, AI integration) $\to$ 7 (assessment). Then open the sketches in \texttt{project\_exercise/ui\_sketches/}. +\footnotesize \textbf{Read the exercise sheet in full before the kickoff}: \texttt{project\_exercise/project\_exercise.pdf} (sixteen pages). Suggested order: Section 1 (goal, the single most important rule) $\to$ 5 (mandatory vs.\ distinction) $\to$ 6 (plan, milestones) $\to$ 2--4 (requirements, architecture, AI integration) $\to$ 7 (assessment) $\to$ 8 (the sketches, also as HTML in \texttt{project\_exercise/ui\_sketches/}). \end{projektbox} \vspace{0.15cm} diff --git a/project_exercise/project_exercise.pdf b/project_exercise/project_exercise.pdf index d0b4cd5..ccd3a6f 100644 Binary files a/project_exercise/project_exercise.pdf and b/project_exercise/project_exercise.pdf differ diff --git a/project_exercise/project_exercise.tex b/project_exercise/project_exercise.tex index d0960e2..92398e5 100644 --- a/project_exercise/project_exercise.tex +++ b/project_exercise/project_exercise.tex @@ -14,6 +14,7 @@ \usepackage{enumitem} \usepackage{microtype} \usepackage{booktabs} +\usepackage{float} \setlength{\emergencystretch}{3em} \renewcommand{\texttt}[1]{{\ttfamily\hyphenchar\font=`\-\relax #1}} @@ -229,6 +230,7 @@ are guidance, not a prescription. \item The UI must contain \textbf{no business logic} --- it only calls the API. \end{itemize} \end{taskbox} +Section~\ref{sec:sketches} shows low-fidelity sketches of the six screens this interface serves. %==================================================================== \section{Architecture: From Ontology to Services} @@ -530,6 +532,124 @@ Evaluation of the project emphasises: \item Distinction criteria for top marks (see Section~\ref{sec:distinction}). \end{itemize} +%==================================================================== +\section{What the Platform Looks Like: UI Sketches} +\label{sec:sketches} + +The sketches on the following pages show the platform from the user's side. They are +\textbf{low-fidelity wireframes, not a specification}: your own screens may look entirely +different, as long as the requirements behind the numbered notes are met. Three things the +sketches make visible: +\begin{itemize}[nosep] + \item the dashboard is a \textbf{thin UI for demonstration} (Section~2.6): every screen only + calls the HTTP/JSON API and contains no business logic; + \item every figure names the \textbf{deterministic service} that computed it, and every AI + statement carries its \textbf{source and its guard verdict}; + \item the system \textbf{degrades gracefully and says so} (Section~4.2): two of the sketches + show an external API failing. +\end{itemize} +Each sketch carries numbered sticky notes that cite the section of this document the element +comes from. The sketches exist as self-contained HTML pages in the course repository +(\texttt{project\_exercise/ui\_sketches/}); open them in a browser to read the details. + +\subsection{Three users, one system} +Sketch~0 introduces the three users the platform serves --- the \emph{portfolio analyst} (primary), +the \emph{compliance reviewer}, who needs every claim traceable, and the \emph{developer/operator}, +i.e.\ you --- and the analyst's path through one working day. Each step maps to a screen and to +the services behind it; the two boxes at the bottom show the same day with the LLM API down and +what the reviewer sees behind an advisor answer. + +\begin{figure}[H] + \centering + \setlength{\fboxsep}{0pt}\setlength{\fboxrule}{0.4pt}% + \fbox{\includegraphics[width=\dimexpr\textwidth-2\fboxrule\relax]{ui_sketches/00_user_journey.png}} + \caption{Sketch 0 --- users and journey. Notes: (1) API-first, no business logic in the + dashboard (Section~2.6); (2) graceful degradation, announced in the UI (Section~4.2).} +\end{figure} + +\subsection{The six screens} +The six screens follow the six functional requirement areas of Section~2. Table~\ref{tab:sketches} +maps each sketch to the requirements it illustrates and to the services behind it. + +\begin{table}[H] +\centering\small +\begin{tabular}{@{}p{1.3cm}p{2.9cm}p{5.2cm}p{5.0cm}@{}} +\toprule +\textbf{Sketch} & \textbf{Screen} & \textbf{Illustrates} & \textbf{Services behind it} \\ +\midrule +1 & Portfolio overview & holdings and figures with their computing service (2.3, 2.4); degraded mode with the LLM circuit open (4.2); freshness stamp & \texttt{PortfolioService}, \texttt{PerformanceService}, \texttt{RiskService} \\ +2 & Market data & live API rate-limited $\rightarrow$ mandatory cache/snapshot fallback (2.1); stable, versioned contract; resilience on every external call (4.2) & \texttt{MarketDataService} \\ +3 & News \& insights & raw news with provenance; schema-validated \texttt{Insight}; ontology guard with a rejected item (2.2, 4.1, 4.2); news as untrusted input & \texttt{NewsIngestionService}, \texttt{ResearchAgent}, ontology guard \\ +4 & Advisor & explained, cited answer; agent trace through contracts (2.5); numbers from services; cost and latency per request from the gateway (4.1) & \texttt{AdvisorAgent}, \texttt{ResearchAgent}, \texttt{RiskAgent}, \texttt{OptimizationAgent}, LLM gateway \\ +5 & Risk \& optimisation & deterministic mean--variance run pinned by reference vectors (2.3, 4.3); the agent explains, never computes (2.5) & \texttt{RiskService}, \texttt{OptimizationService}, \texttt{OptimizationAgent} \\ +6 & System status & the measurement contract live: eval pass rate, cost and latency budgets, module-boundary check, circuit breakers, CI gates (4.3, 5, M2, M5) & LLM gateway, CI pipeline, breakers on all external calls \\ +\bottomrule +\end{tabular} +\caption{The six screens, the requirements they illustrate, and the services behind them.} +\label{tab:sketches} +\end{table} + +\begin{figure}[H] + \centering + \setlength{\fboxsep}{0pt}\setlength{\fboxrule}{0.4pt}% + \fbox{\includegraphics[width=\dimexpr\textwidth-2\fboxrule\relax]{ui_sketches/01_portfolio_dashboard.png}} + \caption{Sketch 1 --- portfolio overview. The LLM circuit breaker is open: insights and the + advisor are paused, the deterministic figures are unaffected, and the banner says so.} +\end{figure} + +\begin{figure}[H] + \centering + \setlength{\fboxsep}{0pt}\setlength{\fboxrule}{0.4pt}% + \fbox{\includegraphics[width=\dimexpr\textwidth-2\fboxrule\relax]{ui_sketches/02_market_data.png}} + \caption{Sketch 2 --- market data. The live price API is rate-limited; the cached snapshot + takes over and every figure is marked accordingly.} +\end{figure} + +\begin{figure}[H] + \centering + \setlength{\fboxsep}{0pt}\setlength{\fboxrule}{0.4pt}% + \fbox{\includegraphics[width=\dimexpr\textwidth-2\fboxrule\relax]{ui_sketches/03_news_insights.png}} + \caption{Sketch 3 --- news and insights. One validated \texttt{Insight} in detail; item N-1017 + is rejected by the ontology guard (unknown ticker, disallowed event type) and its raw text is + kept with provenance for audit.} +\end{figure} + +\begin{figure}[H] + \centering + \setlength{\fboxsep}{0pt}\setlength{\fboxrule}{0.4pt}% + \fbox{\includegraphics[width=\dimexpr\textwidth-2\fboxrule\relax]{ui_sketches/04_advisor.png}} + \caption{Sketch 4 --- the advisor. An explained and cited answer, the agent trace through + service contracts, and cost and latency per request against the budgets of the measurement + contract.} +\end{figure} + +\begin{figure}[H] + \centering + \setlength{\fboxsep}{0pt}\setlength{\fboxrule}{0.4pt}% + \fbox{\includegraphics[width=\dimexpr\textwidth-2\fboxrule\relax]{ui_sketches/05_optimisation.png}} + \caption{Sketch 5 --- risk and optimisation. Frontier, allocation, and every number come from + the deterministic services; the \texttt{OptimizationAgent} only explains.} +\end{figure} + +\begin{figure}[H] + \centering + \setlength{\fboxsep}{0pt}\setlength{\fboxrule}{0.4pt}% + \fbox{\includegraphics[width=\dimexpr\textwidth-2\fboxrule\relax]{ui_sketches/06_system_status.png}} + \caption{Sketch 6 --- system status, the operator's view: the measurement contract live, with + circuit breakers, token spend, and the CI gates including a rolled-back prompt change.} +\end{figure} + +\begin{hintbox} +\begin{itemize}[nosep] + \item Use the sketches as a checklist of \emph{visible} requirements: if a screen of yours + cannot show which service computed a figure, whether an insight passed the guard, or + that a dependency is degraded, the architecture behind it is probably missing something. + \item A Streamlit dashboard with these six screens is one viable design --- but the screens + are yours to decide. What is graded is the system behind the API. + \item Keep the demo reproducible: the sketches assume a pinned data snapshot (Sketch~2, Section~6). +\end{itemize} +\end{hintbox} + \vfill \begin{center}\small Fachhochschule Graub\"unden $\cdot$ Pulverm\"uhlestrasse 57 $\cdot$ 7000 Chur\\