blob: 2afd726c49efe3ab2e90e55f4a60742bd3f9a5a3 (
plain)
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
|
import $ from "jquery";
import * as JSX from './jsx';
import * as API from "./api";
import * as user from "./user";
import * as util from "./util";
import { Page, GroupBox, Spinner, Dropdown, DropdownItem } from './components';
export default function Models() {
if( !API.models.length ) {
const modelTimeout = () => {
if( API.models.length )
JSX.navigateSilent( "/models" );
else
setTimeout( modelTimeout, 100 );
}
modelTimeout();
return <Page>
<div>
<Spinner />
</div>
</Page>
}
let model = API.models[0].name;
if( user.is_loggedin && user.settings.site_prefs && user.settings.site_prefs.model )
model = user.settings.site_prefs.model!;
return <Page>
<GroupBox title="Models" style="width: 85%">
<div id="selector-wrapper">
<Dropdown title={ model } id="model-selector" inline>
{ API.models.map( ( m ) => <DropdownItem onclick={ changeModel }>{ m.name }</DropdownItem> ) }
</Dropdown>
</div>
<div id="model-list"><ModelInfo model={ API.getModelFromName( model ) } /></div>
</GroupBox>
</Page>
}
function changeModel( e: Event ) {
const el = $( e.target );
const txt = el.text();
console.log( txt );
const m = API.getModelFromName( txt );
console.log( m );
$( "#model-list" ).children().replaceWith(
<ModelInfo model={ m } />
);
$( "#model-selector" ).text( m.name );
}
function ModelInfo( props: any ) {
const m = props.model as API.Model;
return <div class="model-item">
<div class="model-header" style="text-align: left">
<h2 style="padding: 0px 10px 20px; margin: 0;">
{ m.name }
</h2>
</div>
<div class="model-body">
<div class="model-capabilities">
<span class={ m.capabilities.web ? "green" : "red" }>Web { m.capabilities.web ? '✔' : '✘' }</span>
<span class={ m.capabilities.notes ? "green" : "red" }>Notes { m.capabilities.notes ? '✔' : '✘' }</span>
<span class={ m.capabilities.vision ? "green" : "red" }>Vision { m.capabilities.vision ? '✔' : '✘' }</span>
<span class={ m.capabilities.remind ? "green" : "red" }>Memory Lookup { m.capabilities.remind ? '✔' : '✘' }</span>
</div>
<div class="model-description">
{ m.description.full }
</div>
<div id="model-license-wrapper"></div>
<br />
</div>
<ModelLicense>
{ util.escapeHtml( m.license ) }
</ModelLicense>
</div>;
}
let license_open = false;
function ModelLicense( props: any ) {
const collapseToggle = () => {
const el = $( "#model-license" );
let list = el.find( '.tool-call-list' );
let btn = el.find( '.tool-call-collapse' );
license_open = list.css( 'display' ) == 'block';
if( !license_open ) {
list.css( 'display', 'block' );
btn.text( '-' );
} else {
list.css( 'display', 'none' );
btn.text( '+' );
}
};
let el = <div class='tool-call' id="model-license" onclick={ collapseToggle }>
<div class='tool-call-title-wrapper'>
<span class='tool-call-title'>License</span>
<span class='tool-call-collapse'>{ license_open ? '-' : '+' }</span>
</div>
<div class='tool-call-list' style={ `display: ${ license_open ? 'block' : 'none' }; white-space: pre-line; text-align: left` }>
{ props.children }
</div>
</div>;
return el;
}
|
