knowledge-transfer-app

KnowledgeTransfer — How Our Hackathon App Works #

Key points #

  • Experts submit raw text (e.g., meeting transcripts) via the /expert route, either by pasting or uploading a .txt file.
  • The system uses Google Gemini to process the raw text into two outputs:
    1. Structured Markdown content (including optional Mermaid diagrams).
    2. A training kit (summary, key concepts, steps, flashcards, and quiz questions) in JSON format.
  • All content is stored in Cloudflare D1 (SQLite at the edge) as "kits," each containing the Markdown content and the training kit metadata.
  • Learners access the processed content via the /learn route, which provides a library, a Markdown reader, flashcards, and quizzes.
  • The core tech stack includes Astro 6 (with server output and Cloudflare adapter), React islands for interactivity, Tailwind v4, marked for Markdown rendering, and mermaid for client-side diagram rendering.
  • There is no authentication layer in the current hackathon scope.

Context and explanations #

The primary goal of the KnowledgeTransfer application is to transform raw knowledge (typically meeting transcripts) into structured, consumable learning units.

Expert Workflow: An expert initiates the process by navigating to the /expert route. Here, they can paste plain text or upload a .txt file containing the knowledge they wish to share. No special formatting is required from the expert.

Generation Process: Upon submission, the browser sends a JSON payload to the /api/generate endpoint. A backend worker then orchestrates two sequential calls to Google Gemini:

  1. Markdown Generation: Gemini first converts the raw transcript into structured Markdown, complete with headings, lists, and potentially Mermaid diagrams. This Markdown is considered the canonical long-form content.
  2. Training Kit Generation: Gemini then generates a "training kit," which is a JSON object containing a summary, key concepts, step-by-step instructions, flashcards, and quiz questions derived from the Markdown content.

Data Persistence: All generated content is stored in Cloudflare D1, a SQLite database operating at the edge. Each row in D1 represents a "kit," which includes the title, the generated Markdown content, a summary snippet, source type, timestamps, and a dedicated metadata column for the training kit JSON.

Learner Experience: Learners interact with the application through the /learn route. This route serves as a library displaying cards for each available kit. Clicking on a kit card leads to a detailed view (/learn/[id]/summary), which presents the Markdown content. Additional tabs provide access to flashcards and quizzes generated as part of the training kit. The MarkdownContent component renders the Markdown and uses the mermaid library on the client to display any diagrams.

Technical Stack: The application is built with Astro 6 configured for server output using the @astrojs/cloudflare adapter. React is used for interactive "islands" within the Astro framework. Styling is managed with Tailwind v4 via @tailwindcss/vite. Markdown rendering is handled by the marked library, and Mermaid diagrams are rendered client-side by the mermaid library.

Other Details:

  • Authentication: For the hackathon, no authentication layer has been implemented.
  • Theming: The application supports light/dark mode, controlled by a ThemeToggle component that persists user preferences.
  • Deletion: Kits can be deleted via a POST request to /api/kits/[id] (typically from an HTML form redirecting back to the library) or via a JSON DELETE request for API-style usage.

Glossary:

  • Kit: A single, saved learning unit resulting from one expert submission.
  • Training kit: The JSON bundle generated by Gemini, comprising summary, concepts, steps, flashcards, and quiz.
  • Transcript Markdown: The LLM-normalized, article-like version of the meeting text.

Diagrams # 

flowchart TD
    A[Expert Input (Text/File)] --> B[/expert route]
    B --> C{Generate Request}
    C --> D[/api/generate (POST JSON)]
    D --> E[Worker]
    E --> F[Google Gemini (1. Markdown Generation)]
    F --> G[Google Gemini (2. Training Kit JSON)]
    G --> H[Cloudflare D1 (Store Kit)]
    H --> I[/learn route (Library)]
    I --> J[Learner Views (Markdown, Flashcards, Quizzes)]