File size: 5,233 Bytes
6e6dab9
 
 
8e9147b
6e6dab9
 
831682d
 
 
 
 
 
1be3dd1
 
 
 
 
4a1d039
 
 
 
831682d
a53437c
f12b690
1be3dd1
6e6dab9
 
2e70541
af8a4b7
ebbfc38
2e70541
02acd51
9136fd8
 
 
 
 
 
bdfe063
9136fd8
 
 
 
 
 
 
 
 
 
 
 
bdfe063
9136fd8
 
 
 
 
 
 
 
bdd842c
fb77726
9136fd8
 
 
 
f2868f6
fb77726
 
 
bdd842c
 
 
f2868f6
bdd842c
 
 
 
 
 
f2868f6
f12b690
 
 
 
f2868f6
7dd081a
 
 
 
fb77726
bdd842c
 
 
 
 
 
 
 
 
 
 
bc9cd50
bdd842c
 
 
 
 
 
6e6dab9
 
9136fd8
6e6dab9
 
 
 
 
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
<!DOCTYPE html>
<html>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <head>
        <title>LLM Mixer</title>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
        <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
        />
        <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css"
        />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
        />
        <script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.5/dist/js.cookie.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
        <link rel="stylesheet" href="./js/default.css" />
    </head>
    <body>
        <div id="main-container">
            <div id="chat-session-container" class="container">
                <div id="messagers-container" class="container m-3 py-2"></div>
            </div>
            <div id="user-interactions" class="container fixed-bottom mb-3">
                <div class="row mt-2 no-gutters">
                    <div class="col px-0">
                            <input
                                id="openai-endpoint"
                                class="form-control"
                                rows="1"
                                placeholder="Input Endpoint URL, then click √"
                            ></input>
                    </div>
                    <div class="col-auto px-0">
                        <button id="openai-endpoint-button" class="btn">
                            <i class="fa fa-check"></i>
                        </button>
                    </div>
                    <div class="col px-0">
                        <input
                            id="openai-api-key"
                            class="form-control"
                            rows="1"
                            placeholder="Input API Key, then click √"
                        ></input>
                    </div>
                    <div class="col-auto px-0">
                        <button id="openai-api-key-button" class="btn">
                            <i class="fa fa-check"></i>
                        </button>
                    </div>
                </div>
                <div class="mt-2 row no-gutters">
                    <div class="col-auto">
                        <button id="show-endpoint-and-key-button" class="btn px-0">
                            <i class="fa fa-key"></i>
                        </button>
                    </div>
                    <div class="col px-0">
                        <select
                            class="form-select"
                            id="available-models-select"
                            title="Available Models"
                        ></select>
                    </div>
                    <div class="col-auto pr-0">
                        <select
                            class="form-select"
                            id="temperature-select"
                            title="Temperature"
                        ></select>
                    </div>
                    <div class="col-auto">
                        <button id="screenshot-button" class="btn px-0">
                            <i class="fa fa-camera"></i>
                        </button>
                    </div>
                    <div class="col-auto">
                        <button id="scroll-to-bottom-button" class="btn px-0">
                            <i class="fa fa-angles-down"></i>
                        </button>
                    </div>
                </div>
                <div class="mt-2 row no-gutters">
                    <div class="col-auto pl-3 pr-0">
                        <button id="new-chat-session" class="btn px-0">
                            <i class="fa fa-circle-plus"></i>
                        </button>
                    </div>
                    <div class="col px-0">
                        <textarea
                            id="user-input"
                            class="form-control"
                            rows="1"
                            placeholder="Typing your prompt here ..."
                        ></textarea>
                    </div>
                    <div class="col-auto pr-3 pl-0">
                        <button id="send-user-input" class="btn px-0">
                            <i class="fa fa-paper-plane"></i>
                        </button>
                    </div>
                </div>

            </div>
        </div>
    </body>
    <script type="module" src="./js/main.js"></script>
</html>