Skip to content

Commit 9525c8f

Browse files
rearmingrearming
committed
bgs, wip monitoring/chat
1 parent 8a9035a commit 9525c8f

File tree

12 files changed

+216
-106
lines changed

12 files changed

+216
-106
lines changed

‎.DS_Store

6 KB
Binary file not shown.

‎demos/.DS_Store

6 KB
Binary file not shown.

‎demos/iACEui/.DS_Store

6 KB
Binary file not shown.

‎demos/iACEui/frontend/README.md

-38
This file was deleted.

‎demos/iACEui/frontend/src/lib/config-components/APISettingsView.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -61,12 +61,12 @@
6161
6262
</script>
6363

64-
<div class=" p-3 space-y-3 {position} border-2 rounded-[20px] {borderColor} font-['Goldman'] w-[250px]">
64+
<div class=" p-3 space-y-3 {position} border-2 rounded-[20px] {borderColor} font-['Goldman'] w-[300px]">
6565
<label class="label">
6666
<span>Model</span>
6767
<select class="select" bind:value={model}>
6868
<option value="gpt-4-0613">gpt-4</option>
69-
<option value="gpt-3.5-turbo-16k-0613">gpt-3.5-turbo</option>
69+
<option value="gpt-3.5-turbo-16k-0613">gpt-3.5-turbo-16k</option>
7070
<option value="gpt-3.5-turbo-instruct">gpt-3.5-turbo-instruct</option>
7171
<option value="gpt-3.5-turbo-0613">gpt-3.5-turbo</option>
7272
</select>

‎demos/iACEui/frontend/src/lib/config-components/Layers.svelte

+112-56
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
import {Tab, TabGroup} from "@skeletonlabs/skeleton";
1212
import {currentLayerConfig, currentLayerName, getLayerConfig} from "$lib/stores/configStores";
1313
import {layerNames} from "$lib/utils/layers";
14+
import {layerNameToBgStyle} from "$lib/graphics";
1415
1516
let colors = [
1617
"border-[#BCA77F]",
@@ -25,73 +26,128 @@
2526
let sizeActive = "w-[150px] h-[150px]";
2627
let sizeInactive = "w-[80px] h-[80px]";
2728
29+
let bgStyle = layerNameToBgStyle();
30+
2831
tabSet.subscribe(value => {
2932
let layerName = layerNames[value];
3033
currentLayerName.set(layerName);
3134
let config = getLayerConfig(layerName);
3235
currentLayerConfig.set(config);
36+
37+
bgStyle = layerNameToBgStyle();
3338
});
3439
</script>
3540

36-
<TabGroup justify="justify-center">
37-
<div class="w-auto h-[150px] flex items-center justify-center">
38-
<Tab bind:group={$tabSet} name="Aspirational Layer" value={0} active="">
39-
<div class="flex flex-row items-center justify-center space-x-3">
40-
<img class={`${$tabSet === 0 ? sizeActive : sizeInactive} rounded-xl transition-size`}
41-
src={AspirationImage} alt=""/>
42-
</div>
43-
</Tab>
44-
<Tab bind:group={$tabSet} name="Global Strategy Layer" value={1} active="">
45-
<div class="flex flex-row items-center justify-center space-x-3">
46-
<img class={`${$tabSet === 1 ? sizeActive : sizeInactive} rounded-xl transition-size`}
47-
src={GlobalStrategyImage} alt=""/>
48-
</div>
49-
</Tab>
50-
<Tab bind:group={$tabSet} name="Agent Model Layer" value={2} active="">
51-
<div class="flex flex-row items-center justify-center space-x-3">
52-
<img class={`${$tabSet === 2 ? sizeActive : sizeInactive} rounded-xl transition-size`}
53-
src={AgentModelImage} alt=""/>
54-
</div>
55-
</Tab>
56-
<Tab bind:group={$tabSet} name="Executive Layer" value={3} active="">
57-
<div class="flex flex-row items-center justify-center space-x-3">
58-
<img class={`${$tabSet === 3 ? sizeActive : sizeInactive} rounded-xl transition-size`}
59-
src={ExecutiveFunctionImage} alt=""/>
60-
</div>
61-
</Tab>
62-
<Tab bind:group={$tabSet} name="Cognitive Control Layer" value={4} active="">
63-
<div class="flex flex-row items-center justify-center space-x-3">
64-
<img class={`${$tabSet === 4 ? sizeActive : sizeInactive} rounded-xl transition-size`}
65-
src={CognitiveControlImage} alt=""/>
66-
</div>
67-
</Tab>
68-
<Tab bind:group={$tabSet} name="Task Prosecution Layer" value={5} active="">
69-
<div class="flex flex-row items-center justify-center space-x-3">
70-
<img class={`${$tabSet === 5 ? sizeActive : sizeInactive} rounded-xl transition-size`}
71-
src={TaskProsecutionImage} alt=""/>
72-
</div>
73-
</Tab>
74-
</div>
75-
76-
<svelte:fragment slot="panel">
77-
{#if $tabSet === 0}
78-
<LayerSettings layerName="Aspirational Layer" layerBorderColor="{colors[0]}" />
79-
{:else if $tabSet === 1}
80-
<LayerSettings layerName="Global Strategy Layer" layerBorderColor="{colors[1]}" />
81-
{:else if $tabSet === 2}
82-
<LayerSettings layerName="Agent Model Layer" layerBorderColor="{colors[2]}" />
83-
{:else if $tabSet === 3}
84-
<LayerSettings layerName="Executive Layer" layerBorderColor="{colors[3]}" />
85-
{:else if $tabSet === 4}
86-
<LayerSettings layerName="Cognitive Control Layer" layerBorderColor="{colors[4]}" />
87-
{:else if $tabSet === 5}
88-
<LayerSettings layerName="Task Prosecution Layer" layerBorderColor="{colors[5]}" />
89-
{/if}
90-
</svelte:fragment>
91-
</TabGroup>
41+
<div class="h-auto w-auto" style="{bgStyle}">
42+
<TabGroup justify="justify-center">
43+
<div class="w-auto h-[150px] flex items-center justify-center">
44+
<Tab bind:group={$tabSet} name="Aspirational Layer" value={0} active="">
45+
<div class="flex flex-row items-center justify-center space-x-3">
46+
<img class={`${$tabSet === 0 ? sizeActive : sizeInactive} rounded-xl transition-size`}
47+
src={AspirationImage} alt=""/>
48+
</div>
49+
</Tab>
50+
<Tab bind:group={$tabSet} name="Global Strategy Layer" value={1} active="">
51+
<div class="flex flex-row items-center justify-center space-x-3">
52+
<img class={`${$tabSet === 1 ? sizeActive : sizeInactive} rounded-xl transition-size`}
53+
src={GlobalStrategyImage} alt=""/>
54+
</div>
55+
</Tab>
56+
<Tab bind:group={$tabSet} name="Agent Model Layer" value={2} active="">
57+
<div class="flex flex-row items-center justify-center space-x-3">
58+
<img class={`${$tabSet === 2 ? sizeActive : sizeInactive} rounded-xl transition-size`}
59+
src={AgentModelImage} alt=""/>
60+
</div>
61+
</Tab>
62+
<Tab bind:group={$tabSet} name="Executive Layer" value={3} active="">
63+
<div class="flex flex-row items-center justify-center space-x-3">
64+
<img class={`${$tabSet === 3 ? sizeActive : sizeInactive} rounded-xl transition-size`}
65+
src={ExecutiveFunctionImage} alt=""/>
66+
</div>
67+
</Tab>
68+
<Tab bind:group={$tabSet} name="Cognitive Control Layer" value={4} active="">
69+
<div class="flex flex-row items-center justify-center space-x-3">
70+
<img class={`${$tabSet === 4 ? sizeActive : sizeInactive} rounded-xl transition-size`}
71+
src={CognitiveControlImage} alt=""/>
72+
</div>
73+
</Tab>
74+
<Tab bind:group={$tabSet} name="Task Prosecution Layer" value={5} active="">
75+
<div class="flex flex-row items-center justify-center space-x-3">
76+
<img class={`${$tabSet === 5 ? sizeActive : sizeInactive} rounded-xl transition-size`}
77+
src={TaskProsecutionImage} alt=""/>
78+
</div>
79+
</Tab>
80+
</div>
81+
82+
<svelte:fragment slot="panel">
83+
{#if $tabSet === 0}
84+
<LayerSettings layerName="Aspirational Layer" layerBorderColor="{colors[0]}"/>
85+
{:else if $tabSet === 1}
86+
<LayerSettings layerName="Global Strategy Layer" layerBorderColor="{colors[1]}"/>
87+
{:else if $tabSet === 2}
88+
<LayerSettings layerName="Agent Model Layer" layerBorderColor="{colors[2]}"/>
89+
{:else if $tabSet === 3}
90+
<LayerSettings layerName="Executive Layer" layerBorderColor="{colors[3]}"/>
91+
{:else if $tabSet === 4}
92+
<LayerSettings layerName="Cognitive Control Layer" layerBorderColor="{colors[4]}"/>
93+
{:else if $tabSet === 5}
94+
<LayerSettings layerName="Task Prosecution Layer" layerBorderColor="{colors[5]}"/>
95+
{/if}
96+
</svelte:fragment>
97+
</TabGroup>
98+
99+
</div>
92100

93101
<style>
94102
.transition-size {
95103
transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
96104
}
105+
106+
.bgLayer {
107+
108+
109+
110+
111+
/*background-image: linear-gradient(*/
112+
/* 45deg,*/
113+
/* rgba(176, 142, 102, 0.5),*/
114+
/* rgba(214, 176, 126, 0.5),*/
115+
/* rgba(95, 95, 94, 0.5),*/
116+
/* rgba(145, 110, 80, 0.5),*/
117+
/* rgba(240, 210, 152, 0.5)*/
118+
/*);*/
119+
/*height: 1600px; !* 9:16 ratio, you can adjust as needed *!*/
120+
/*width: 900px;*/
121+
}
122+
123+
:global(.aspirational-layer-bg) {
124+
background: radial-gradient(123.16% 171.6% at 131.71% -14.68%, #C9A86D 0%, #FDD182 10.96%, rgba(254, 226, 175, 0.25) 35.04%, rgba(254, 235, 200, 0.06) 48.17%, rgba(255, 255, 255, 0.00) 91.67%, rgba(255, 255, 255, 0.00) 100%);
125+
background-size: cover;
126+
}
127+
128+
:global(.global-strategy-layer-bg) {
129+
background: radial-gradient(123.16% 171.6% at 131.71% -14.68%, #58A19A 0%, #7CB3B5 10.96%, rgba(88, 161, 154, 0.3) 35.04%, rgba(88, 161, 154, 0.1) 48.17%, rgba(255, 255, 255, 0.00) 91.67%, rgba(255, 255, 255, 0.00) 100%);
130+
background-size: cover;
131+
}
132+
133+
:global(.agent-model-layer-bg) {
134+
background: radial-gradient(123.16% 171.6% at 131.71% -14.68%, #E3A2E3 0%, #E9B2E9 10.96%, rgba(227, 162, 227, 0.3) 35.04%, rgba(227, 162, 227, 0.1) 48.17%, rgba(255, 255, 255, 0.00) 91.67%, rgba(255, 255, 255, 0.00) 100%);
135+
background-size: cover;
136+
}
137+
138+
:global(.executive-layer-bg) {
139+
background: radial-gradient(123.16% 171.6% at 131.71% -14.68%, #A8E0E8 0%, #B2E5ED 10.96%, rgba(168, 224, 232, 0.3) 35.04%, rgba(168, 224, 232, 0.1) 48.17%, rgba(255, 255, 255, 0.00) 91.67%, rgba(255, 255, 255, 0.00) 100%);
140+
background-size: cover;
141+
}
142+
143+
:global(.cognitive-control-layer-bg) {
144+
background: radial-gradient(123.16% 171.6% at 131.71% -14.68%, #4AB0B9 0%, #5FBCC5 10.96%, rgba(74, 176, 185, 0.3) 35.04%, rgba(74, 176, 185, 0.1) 48.17%, rgba(255, 255, 255, 0.00) 91.67%, rgba(255, 255, 255, 0.00) 100%);
145+
background-size: cover;
146+
}
147+
148+
:global(.task-prosecution-layer-bg) {
149+
background: radial-gradient(123.16% 171.6% at 131.71% -14.68%, #A45534 0%, #B06642 10.96%, rgba(164, 85, 52, 0.3) 35.04%, rgba(164, 85, 52, 0.1) 48.17%, rgba(255, 255, 255, 0.00) 91.67%, rgba(255, 255, 255, 0.00) 100%);
150+
background-size: cover;
151+
}
152+
97153
</style>

‎demos/iACEui/frontend/src/lib/graphics.ts

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import {get} from "svelte/store";
2+
import {currentLayerName} from "$lib/stores/configStores";
3+
4+
export function layerNameToBgStyle() : string
5+
{
6+
switch (get(currentLayerName)) {
7+
case "Aspirational Layer":
8+
return `background: radial-gradient(123.16% 171.6% at 131.71% -14.68%, #C9A86D 0%, #FDD182 10.96%, rgba(254, 226, 175, 0.25) 35.04%, rgba(254, 235, 200, 0.06) 48.17%, rgba(255, 255, 255, 0.00) 91.67%, rgba(255, 255, 255, 0.00) 100%);
9+
background-size: cover;`
10+
case "Global Strategy Layer":
11+
return `background: radial-gradient(123.16% 171.6% at 131.71% -14.68%, #58A19A 0%, #7CB3B5 10.96%, rgba(88, 161, 154, 0.3) 35.04%, rgba(88, 161, 154, 0.1) 48.17%, rgba(255, 255, 255, 0.00) 91.67%, rgba(255, 255, 255, 0.00) 100%);
12+
background-size: cover;`
13+
case "Agent Model Layer":
14+
return `background: radial-gradient(123.16% 171.6% at 131.71% -14.68%, #E3A2E3 0%, #E9B2E9 10.96%, rgba(227, 162, 227, 0.3) 35.04%, rgba(227, 162, 227, 0.1) 48.17%, rgba(255, 255, 255, 0.00) 91.67%, rgba(255, 255, 255, 0.00) 100%);
15+
background-size: cover;`
16+
case "Executive Layer":
17+
return `background: radial-gradient(123.16% 171.6% at 131.71% -14.68%, #A8E0E8 0%, #B2E5ED 10.96%, rgba(168, 224, 232, 0.3) 35.04%, rgba(168, 224, 232, 0.1) 48.17%, rgba(255, 255, 255, 0.00) 91.67%, rgba(255, 255, 255, 0.00) 100%);
18+
background-size: cover;`
19+
case "Cognitive Control Layer":
20+
return `background: radial-gradient(123.16% 171.6% at 131.71% -14.68%, #4AB0B9 0%, #5FBCC5 10.96%, rgba(74, 176, 185, 0.3) 35.04%, rgba(74, 176, 185, 0.1) 48.17%, rgba(255, 255, 255, 0.00) 91.67%, rgba(255, 255, 255, 0.00) 100%);
21+
background-size: cover;`
22+
case "Task Prosecution Layer":
23+
return `background: radial-gradient(123.16% 171.6% at 131.71% -14.68%, #A45534 0%, #B06642 10.96%, rgba(164, 85, 52, 0.3) 35.04%, rgba(164, 85, 52, 0.1) 48.17%, rgba(255, 255, 255, 0.00) 91.67%, rgba(255, 255, 255, 0.00) 100%);
24+
background-size: cover;`
25+
default:
26+
return "";
27+
}
28+
}

‎demos/iACEui/frontend/src/lib/images.zip

10.6 MB
Binary file not shown.

0 commit comments

Comments
 (0)