Hugging Face's logo

Spaces:
victor
/
chat-vs-chat
Runtime error

App Files Community
chat-vs-chat
File size: 5,240 Bytes 
6d49714
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Chat-vs-chat</title>
    <script src="https://cdn.tailwindcss.com"></script>

    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.8/handlebars.js"
      integrity="sha512-qwi9BHx0+QtW8krMaXObe76bUkPf8nRJOufgT5GS7C74s2sV+neksCVUhAWuMSXxZzKHiM3RuADPmWbhguWEIw=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <script type="text/javascript">
      const prompt = (message) => {
        return `<s>[INST]You are a summarization AI. Your task is to summarize user requests, in a single sentence of less than 5 words. Do not try to answer questions, just summarize the user's request. Start your answer with an emoji relevant to the summary.\nWho is the president of Gabon? [/INST]🇬🇦 President of Gabon</s>[INST]Who is Julien Chaumond?[/INST]🧑 Julien Chaumond</s>[INST]What are the latest news?[/INST]📰 Latest news</s>[INST]How to make a great cheesecake?[/INST]🍰 Cheesecake recipe</s>[INST]What is 1 + 1?[/INST]🔢 Simple math operation</s>[INST]${message}[/INST]`;
      };

      async function sendMessage(message, temperature, maxNewTokens) {
        const response1 = await fetch("/api/model/mistralai", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            inputs: prompt(message),
            temperature: temperature,
            max_new_tokens: maxNewTokens,
          }),
        });
        const response2 = await fetch("/api/model/zephyr", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            inputs: prompt(message),
            temperature: temperature,
            max_new_tokens: maxNewTokens,
          }),
        });
        const data1 = await response1.json();
        const data2 = await response2.json();

        // Assuming you want to display the 'generated_text' field in the UI
        document.querySelector("#mistral-response").textContent =
          data1.generated_text || "Error";
        document.querySelector("#zephyr-response").textContent =
          data2.generated_text || "Error";
      }

      document.addEventListener("DOMContentLoaded", () => {
        document
          .querySelector("form")
          .addEventListener("submit", async (event) => {
            event.preventDefault();

            const message =
              event.target.querySelector("input[type='text']").value;
            const temperature = parseFloat(
              document.querySelector("#temperature-input").value
            );
            const maxNewTokens = parseInt(
              document.querySelector("#max-tokens-input").value,
              10
            );

            await sendMessage(message, temperature, maxNewTokens);
          });
      });
    </script>
  </head>
  <body>
    <div
      class="max-w-screen flex h-screen flex-col overflow-hidden max-h-screen"
    >
      <form action="">
        <input
          placeholder="Type your message"
          type="text"
          class="h-12 w-full border-b px-4 focus:bg-gray-50 focus:outline-none"
        />
      </form>
      <div class="grid flex-1 grid-cols-2 divide-x overflow-y-auto">
        <div class="relative flex flex-col space-y-2">
          <div
            class="text-xs flex sticky top-0 inset-x-0 h-9 overflow-hidden items-center whitespace-nowrap border-b bg-gray-50 px-4 font-mono sm:text-sm leading-none text-gray-500"
          >
            Mistral-7B-Instruct-v0.1
          </div>
          <div
            id="mistral-response"
            class="mx-2 max-sm:text-sm self-start rounded-lg bg-gray-50 p-3 text-gray-700 break-words overflow-y-auto"
          ></div>
        </div>
        <div class="relative flex flex-col space-y-2">
          <div
            class="text-xs flex sticky top-0 inset-x-0 h-9 overflow-hidden items-center whitespace-nowrap border-b bg-gray-50 px-4 font-mono sm:text-sm leading-none text-gray-500"
          >
            HuggingFaceH4/zephyr-7b-alpha
          </div>
          <div
            id="zephyr-response"
            class="mx-2 max-sm:text-sm self-start rounded-lg bg-gray-50 p-3 text-gray-700 break-words overflow-y-auto"
          ></div>
        </div>
      </div>
      <div
        class="flex h-9 sm:h-12 items-stretch justify-end divide-x border-t font-mono text-xs sm:text-sm text-gray-500"
      >
        <label for="temperature-input" class="flex items-center gap-4 px-4">
          temperature
          <input
            value="1"
            type="number"
            id="temperature-input"
            class="w-16 rounded border bg-gray-100 px-1"
          />
        </label>
        <label for="max-tokens-input" class="flex items-center gap-4 px-4">
          max_new_tokens
          <input
            value="512"
            type="number"
            id="max-tokens-input"
            class="w-16 rounded border bg-gray-100 px-1"
          />
        </label>
      </div>
    </div>
  </body>
</html>