File size: 1,771 Bytes
57e16da
39b5447
 
1e32534
57e16da
39b5447
57e16da
39b5447
 
 
 
 
57e16da
 
 
39b5447
 
 
 
 
 
 
 
 
1e32534
39b5447
 
57e16da
39b5447
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
57e16da
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<script lang="ts">
  import { onMount } from "svelte";
  import { HF_ACCESS_TOKEN, OPENAI_API_KEY } from "$lib/store";
  import { goto } from "$app/navigation";

  let dialogElement: HTMLDialogElement;

  onMount(() => {
    if ($HF_ACCESS_TOKEN === "") {
      dialogElement.showModal();
    }
  });
</script>

<dialog
  id="api_modal"
  class="modal"
  bind:this={dialogElement}
  on:close={() => {
    if ($HF_ACCESS_TOKEN === "") {
      dialogElement.showModal();
    } else {
      localStorage.setItem("HF_ACCESS_TOKEN", $HF_ACCESS_TOKEN);
      localStorage.setItem("OPENAI_API_KEY", $OPENAI_API_KEY);
      goto("/");
    }
  }}
>
  <form method="dialog" class="modal-box">
    <h3 class="font-bold text-lg">API keys needed</h3>
    <div class="w-full flex flex-col gap-5">
      <form aria-label="HF API" class="form-control">
        <p class="py-4">
          In order for this demo to work you need your API token from HF.
        </p>
        <label for="hf_key" class="label-text pb-2">HF API token</label>
        <input
          class="input input-primary"
          name="hf_key"
          type="text"
          placeholder="hf_***"
          bind:value={$HF_ACCESS_TOKEN}
        />
      </form>
      <form aria-label="OPENAI API" class="form-control">
        <p class="py-4">
          Optionally you can add your OpenAI key to use it as your LLM.
        </p>

        <label for="oai_key" class="label-text pb-2">OpenAI API key</label>
        <input
          class="input input-primary"
          name="oai_key"
          type="text"
          placeholder="sk-***"
          bind:value={$OPENAI_API_KEY}
        />
      </form>
    </div>
    <div class="modal-action">
      <button class="btn">Close</button>
    </div>
  </form>
</dialog>