OneChat/index.html at master · OneBacklog/OneChat · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="color-scheme" content="dark">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="pico.min.css">
  <link rel="stylesheet" type="text/css" href="main.css?v=6">
  <link rel="manifest" href="/manifest.json">
  <link rel="icon" href="favicon.png">
  <title>OneChat by OneBacklog</title>
</head>
<body>
  <main class="container-fluid">
    <ul id="chat">
      <article v-if="settings.token.length < 40" id="github">
        <small>Please set a valid <a href="https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens#creating-a-personal-access-token-classic" target="_blank">GitHub Token</a> in the Settings.</small>
      </article>
      <template v-for="message in messages">
        <li
          v-if="message.role != 'system'"
          :class="message.role"
          v-html="message.content"
        />
      </template>
    </ul>
    <form @submit.prevent="send()">
      <textarea ref="prompt" @input="resize" v-model="input" rows="1" :placeholder="placeholder" :disabled="loading" required></textarea>
      <section id="actions">
        <button type="submit" :aria-busy="loading" :disabled="loading">{{ loading ? '' : 'SEND' }}</button>
        <small><template v-if="total_tokens != 0">{{ total_tokens }} Tokens</template></small>
        <!-- Quick Select Model -->
        <div id="models">
          <a href="javascript:void(0)" @click.prevent="settings.select = !settings.select" data-tooltip="Switch Model" data-placement="right" :class="settings.select ? 'opened' : 'closed'"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#0172ad"><path d="M666-440 440-666l226-226 226 226-226 226Zm-546-80v-320h320v320H120Zm400 400v-320h320v320H520Zm-400 0v-320h320v320H120Zm80-480h160v-160H200v160Zm467 48 113-113-113-113-113 113 113 113Zm-67 352h160v-160H600v160Zm-400 0h160v-160H200v160Zm160-400Zm194-65ZM360-360Zm240 0Z"/></svg></a>
          <fieldset :class="settings.select ? '' : 'hidden'">
            <label v-for="model in models">
              <input type="radio" v-model="settings.model" :value="model.value" /> {{ model.name }}
            </label>
          </fieldset>
        </div>
        <!-- Clear Conversation -->
        <a href="javascript:void(0)" @click.prevent="clear()" data-tooltip="Clear Conversation" data-placement="right"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#0172ad"><path d="m336-280 144-144 144 144 56-56-144-144 144-144-56-56-144 144-144-144-56 56 144 144-144 144 56 56ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg></a>
        <!-- Settings -->
        <a href="javascript:void(0)" @click.prevent="toggle()" data-tooltip="Settings" data-placement="right"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#0172ad"><path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z"/></svg></a>
      </section>
    </form>
  </main>
  <!-- Settings Modal -->
  <dialog :open="settings.open">
    <article>
      <header>
        <button aria-label="Close" rel="prev" @click="toggle()"></button>
        <strong>Settings</strong>
      </header>
      <form @submit.prevent="save()">
        <input type="text" v-model="form.token" placeholder="GitHub Token" autocomplete="off" required>
        <select v-model="form.model" required>
          <option v-for="model in models" :value="model.value">{{ model.name }}</option>
        </select>
        <textarea v-model="form.system[form.model]" rows="5" placeholder="Custom System Instruction"></textarea>
        <section id="settings">
          <a href="https://github.com/OneBacklog/OneChat" target="_blank" data-tooltip="Source Code" data-placement="right"><svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" fill="#c2c7d0" viewBox="0 0 16 16">
            <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/>
          </svg></a>
          <button type="submit">SAVE</button>
        </section>
      </form>
    </article>
  </dialog>
  <script src="vue.global.prod.js" defer></script>
  <script src="marked.min.js" defer></script>
  <script src="main.js?v=8" defer></script>
</body>
</html>