File size: 7,040 Bytes
ae31beb
 
 
 
 
1af2928
c009dd5
 
 
 
c3b58ec
3ab87cd
c009dd5
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3239c32
c009dd5
 
 
 
 
 
 
 
 
 
 
 
 
 
2e92470
c009dd5
 
 
 
 
 
 
 
 
11e9138
c009dd5
 
1af2928
2e92470
c009dd5
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1af2928
2e92470
c009dd5
19d7fb4
 
 
3ab87cd
c009dd5
2e92470
c009dd5
c3b58ec
2e92470
 
 
 
 
 
c009dd5
2e92470
 
c009dd5
 
2e92470
c009dd5
 
 
 
 
 
 
 
 
 
19d7fb4
c009dd5
3239c32
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f7c1f6c
 
3239c32
c009dd5
19d7fb4
3ab87cd
19d7fb4
f7c1f6c
 
1af2928
 
 
f7c1f6c
 
 
c3b58ec
19d7fb4
 
11e9138
3ab87cd
 
 
c3b58ec
 
 
 
 
 
19d7fb4
 
 
 
 
c3b58ec
19d7fb4
 
c3b58ec
3ab87cd
 
19d7fb4
 
 
3ab87cd
 
19d7fb4
3ab87cd
ae31beb
c009dd5
 
 
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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
import {
    available_models,
    AvailableModelsRequester,
} from "../networks/llm_requester.js";

class EndpointStorageItem {}

class EndpointStorage {
    constructor() {
        this.init_database();
        this.fill_available_models_select("user-customized");
        this.create_endpoint_and_api_key_items();
    }
    init_database() {
        this.db = new Dexie("endpoints");
        this.db.version(1).stores({
            endpoints: "index, endpoint, api_key",
        });
        this.db.endpoints.count((count) => {
            console.log(`${count} endpoints loaded.`);
        });
    }
    clear_database() {
        this.db.endpoints.clear();
        console.log("endpoints cleared.");
    }
    get_endpoint_and_api_key_item_html() {
        let endpoint_and_api_key_item_html = `
            <div class="row mt-2 no-gutters">
                <div class="col-auto">
                    <button class="btn px-0 remove-endpoint-button">
                        <i class="fa fa-circle-minus"></i>
                    </button>
                </div>
                <div class="col pl-0">
                    <input class="form-control endpoint-input" rows="1"
                        placeholder="Input Endpoint URL"
                    ></input>
                </div>
                <div class="col pl-0">
                    <input class="form-control api-key-input" rows="1"
                        placeholder="Input API Key, then click √"
                    ></input>
                </div>
                <div class="col-auto px-0">
                    <button class="btn submit-endpoint-button">
                        <i class="fa fa-check"></i>
                    </button>
                </div>
            </div>
        `;
        return endpoint_and_api_key_item_html;
    }
    add_endpoint_and_api_key_item() {
        let endpoint_and_api_key_items = $("#endpoint-and-api-key-items");
        let endpoint_and_api_key_item = $(
            this.get_endpoint_and_api_key_item_html()
        );
        endpoint_and_api_key_items.append(endpoint_and_api_key_item);
        this.bind_endpoint_and_api_key_buttons(endpoint_and_api_key_item);
    }
    create_endpoint_and_api_key_items() {
        let endpoint_and_api_key_items = $("#endpoint-and-api-key-items");
        let endpoints = this.db.endpoints;
        endpoint_and_api_key_items.empty();

        endpoints.each((row) => {
            let endpoint_and_api_key_item_html =
                this.get_endpoint_and_api_key_item_html();
            let endpoint_and_api_key_item = $(endpoint_and_api_key_item_html);
            let endpoint_input =
                endpoint_and_api_key_item.find(".endpoint-input");
            endpoint_input.val(row.endpoint);
            let api_key_input =
                endpoint_and_api_key_item.find(".api-key-input");
            api_key_input.val(row.api_key);
            endpoint_and_api_key_items.append(endpoint_and_api_key_item);
            this.bind_endpoint_and_api_key_buttons(endpoint_and_api_key_item);
        });
        endpoints.each((row) => {
            this.fill_available_models_select(row.endpoint);
        });
        endpoint_and_api_key_items.hide();
    }
    bind_endpoint_and_api_key_buttons(endpoint_and_api_key_item) {
        let self = this;
        // console.log("endpoint_and_api_key_item:", endpoint_and_api_key_item);
        let endpoint_submit_button = endpoint_and_api_key_item.find(
            ".submit-endpoint-button"
        );
        endpoint_submit_button.click(function () {
            let endpoint_input =
                endpoint_and_api_key_item.find(".endpoint-input");
            let endpoint_input_value = endpoint_input.val().trim();
            let api_key_input =
                endpoint_and_api_key_item.find(".api-key-input");
            let api_key_input_value = api_key_input.val().trim();

            if (endpoint_input_value.trim() === "") {
                console.log("Endpoint is empty.");
                return;
            } else {
                self.db.endpoints.put({
                    index: endpoint_input_value,
                    endpoint: endpoint_input_value,
                    api_key: api_key_input_value,
                });
                console.log(`new_endpoint: ${endpoint_input_value}`);
            }
            self.fill_available_models_select(endpoint_input_value);
        });

        let remove_endpoint_buttons = endpoint_and_api_key_item.find(
            ".remove-endpoint-button"
        );
        remove_endpoint_buttons.click(function () {
            let endpoint_input =
                endpoint_and_api_key_item.find(".endpoint-input");
            let endpoint_input_value = endpoint_input.val();
            endpoint_and_api_key_item.remove();
            if (
                endpoint_input_value.trim() === "" ||
                self.db.endpoints.get(endpoint_input_value) === undefined
            ) {
                console.log("Endpoint not in endpoints");
            } else {
                self.db.endpoints.delete(endpoint_input_value);
            }
            console.log(`remove endpoint: ${endpoint_input_value}`);

            // TODO: remove models of current endpoint from available_models_select
        });
    }
    async fill_available_models_select(endpoint) {
        let select = $("#available-models-select");
        console.log("fetch available models for endpoint:", endpoint);
        // if endpoint not starts with http
        if (endpoint.startsWith("http")) {
            let available_models_requester = new AvailableModelsRequester(
                endpoint
            );
            await available_models_requester.get();
        } else {
        }
        available_models[endpoint].forEach((value, index) => {
            const option = new Option(value, value);
            select.append(option);
        });
        this.set_default_model();
    }
    set_default_model() {
        let flatten_available_models = [];
        Object.entries(available_models).forEach(([key, value]) => {
            flatten_available_models.push(...value);
        });
        flatten_available_models = [...new Set(flatten_available_models)];

        let default_model = "";
        let storage_default_model = localStorage.getItem("default_model");
        console.log("storage_default_model:", storage_default_model);
        if (
            storage_default_model &&
            flatten_available_models.includes(storage_default_model)
        ) {
            default_model = storage_default_model;
        } else if (flatten_available_models) {
            // default_model = flatten_available_models[0];
            // localStorage.setItem("default_model", default_model);
        } else {
            default_model = "";
        }

        let select = $("#available-models-select");
        select.val(default_model);
        console.log(`default_model is set to: ${select.val()}`);
    }
}

export let endpoint_storage = new EndpointStorage();