+mermaid.svelte

gistfile1.txt

<script>
  // @ts-nocheck

  import mermaid from "mermaid";
  import { onMount } from "svelte";
  import { browser } from "$app/environment";
  import MarkdownRenderer from "../components/MarkdownRenderer.svelte";
  import Spinner from "../components/Spinner.svelte";
  $: inputText = ``;
  $: thoughtProcess = ``;
  $: mermaidCode = ``;
  $: processing = false;

  onMount(() => {
    mermaid.initialize({ startOnLoad: true, theme: "dark" });
  });

  let mermaidContainer;
  const onImagine = async () => {
    mermaidCode = ``;
    thoughtProcess = ``;
    if (!inputText.trim().length > 6) {
      console.log("ERROR: Provided usecase description is too short!");
      return;
    }
    processing = true;
    const body = {
      messages: [{ role: "user", content: inputText }],
    };
    try {
      const response = await fetch("http://localhost:8989/api/mermaid-chat", {
        method: "POST",
        body: JSON.stringify(body),
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
      });
      const data = await response.json();
      if (data.ok) {
        thoughtProcess = data.thought;
        mermaidCode = data.code;
        if (browser) {
          const { svg } = await mermaid.render("mermaid", mermaidCode);
          if (mermaidContainer) {
            mermaidContainer.innerHTML = svg;
          }
        }
      } else {
        console.log("Error getting the diagram.");
      }
    } catch (error) {
      console.log("ERROR: ", error);
    } finally {
      processing = false;
    }
  };
</script>

<div class=" text-white min-w-full min-h-screen">
  <div
    class="min-w-full min-h-screen flex flex-col items-center justify-center space-y-2"
  >
    <p class="text-xl font-bold">Create Diagrams</p>
    <textarea
      name="Usecase"
      placeholder="Usecase"
      bind:value={inputText}
      class="bg-transparent rounded-lg shadow-md border border-gray-500 min-w-[30%] min-h-[10vh] p-2"
    />
    <button on:click={onImagine} class="rounded-full px-6 py-2 shadow-lg bg-sky-500"
      >{#if processing}
        <Spinner />
      {:else}
        Imagine
      {/if}</button
    >
    <div class="my-2 space-x-2 px-4 py-2 justify-center items-center">
      {#if mermaidCode.length > 0 && thoughtProcess.length > 0}
        <MarkdownRenderer markdownText={thoughtProcess} />
        <div class="min-w-full items-center justify-center" bind:this={mermaidContainer} />
      {/if}
    </div>
  </div>
</div>