File size: 5,452 Bytes
6e6dab9
 
 
8e9147b
6e6dab9
 
02d00f4
aa749fb
 
831682d
 
aa749fb
831682d
1be3dd1
 
 
 
 
4a1d039
 
 
 
a53437c
f12b690
d0078b0
af56619
6e6dab9
 
2e70541
af8a4b7
f8ad7ae
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
 
 
34043c8
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
119
<!DOCTYPE html>
<html>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <head>
        <title>LLM Mixer</title>
        <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%221em%22 font-size=%2280%22>♾️</text></svg>">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css"
        />
        <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://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>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
        <link rel="stylesheet" href="./css/default.css" />
    </head>
    <body>
        <div id="main-container">
            <div id="chat-session-container" class="container">
                <div id="messagers-container" class="container my-3 py-1"></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="./main.js"></script>
</html>