File size: 2,249 Bytes
57e16da
39b5447
28e12d0
1e32534
57e16da
28e12d0
57e16da
39b5447
 
 
 
 
57e16da
 
 
39b5447
 
 
 
 
 
 
 
 
28e12d0
1e32534
39b5447
 
57e16da
39b5447
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
28e12d0
 
 
 
 
 
 
 
 
 
 
 
39b5447
28e12d0
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
66
67
68
69
70
71
72
73
74
75
76
77
78
<script lang="ts">
  import { onMount } from "svelte";
  import { HF_ACCESS_TOKEN, OPENAI_API_KEY, HF_ENDPOINT } from "$lib/store";
  import { goto } from "$app/navigation";

  export 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);
      localStorage.setItem("HF_ENDPOINT", $HF_ENDPOINT);
      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="HF ENDPOINT" class="form-control">
        <label for="hf_endpoint" class="label-text pb-2">HF Endpoint</label>
        <input
          class="input input-primary"
          name="hf_endpoint"
          type="text"
          placeholder="Leave empty to use the default endpoint"
          bind:value={$HF_ENDPOINT}
        />
      </form>

      <div class="divider my-0" />
      <form aria-label="OPENAI API" class="form-control">
        <p class="pb-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>