File size: 5,606 Bytes
6e6dab9
 
68e33b7
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
b30bb95
 
 
68e33b7
 
 
 
 
c00fa7c
 
68e33b7
c00fa7c
 
 
e950717
68e33b7
2e70541
68e33b7
ef52f60
68e33b7
 
6d96d53
 
22b469d
 
 
 
6d96d53
 
 
 
68e33b7
6e6dab9
6d96d53
 
 
68e33b7
6d96d53
 
68e33b7
 
277b8cc
ab4c27f
 
277b8cc
 
68e33b7
 
 
 
 
 
 
 
c00fa7c
6d96d53
 
 
 
 
 
 
 
 
 
 
c00fa7c
 
68e33b7
6d96d53
 
 
 
 
404b568
68e33b7
 
ab4c27f
68e33b7
 
 
 
eada0f8
68e33b7
 
 
 
 
 
 
6e6dab9
68e33b7
 
 
 
 
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
<!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>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment-with-locales.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dexie/3.2.4/dexie.min.js"></script>
    <link rel="stylesheet" href="./css/default.css" />
</head>

<body>
    <div id="main-container">
        <div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1"
            id="chat-history-sidebar" aria-labelledby="chat-history-sidebar-label">
            <div class="offcanvas-header">
                <h5 class="offcanvas-title" id="chat-history-label">
                    <a style="text-decoration: none; color:inherit;" href="#">Chat History</a>
                </h5>
                <button id="chat-history-sidebar-close-button" class="btn-close">
                </button>
            </div>
            <div class="offcanvas-body">
                <ul id="chat-history-sidebar-items" class="navbar-nav justify-content-end flex-grow-1">
                </ul>
            </div>
            <div class="my-2 row no-gutters justify-content-end">
                <div class="col">
                <button id="clear-chat-history-button" class="btn">
                    <i class="fa fa-trash"></i>
                </button>
            </div>
                <div class="col">
                    <button id="screenshot-button" class="btn">
                        <i class="fa fa-camera"></i>
                    </button>
        </div>
            </div>
        </div>
        <div id="top-toolbar" class="container fixed-top mt-2 pb-2">
            <div class="mt-2 row no-gutters justify-content-start">
                <div class="col-auto">
                    <button id="chat-history-sidebar-toggle-button" class="btn px-0">
                        <i class="fa fa-bars"></i>
                    </button>
                </div>
                <div class="col-auto">
                    <button id="toggle-endpoint-and-api-key-items-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">
                    <button id="scroll-to-bottom-button" class="btn px-0">
                        <i class="fa fa-angles-down"></i>
                    </button>
                </div>
                <div class="col-auto">
                    <button id="toggle-agents-sidebar-button" class="btn px-0">
                        <i class="fa fa-user"></i>
                    </button>
                </div>
            </div>
            <div class="row no-gutters justify-content-start">
                <div id="endpoint-and-api-key-items">
                </div>
                <div class="col-auto mt-2">
                    <button id="add-endpoint-and-api-key-item-button" class="btn px-0">
                        <i class="fa fa-circle-plus"></i>
                    </button>
                </div>
            </div>
        </div>
        <div id="chat-session-container" class="container">
            <div id="messagers-container" class="container"></div>
        </div>
        <div id="user-interactions" class="container fixed-bottom mb-3">
            <div class="my-2 row no-gutters">
                <div class="col-auto pr-0">
                    <button id="new-chat-session" class="btn px-0">
                        <i class="fa fa-compass"></i>
                    </button>
                </div>
                <div class="col px-0">
                    <textarea id="user-input" class="form-control" rows="1"
                        placeholder="Ask me anything ..."></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>