ninegrid2 6.108.0 → 6.110.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -3,6 +3,7 @@
3
3
  class aiSettings extends HTMLElement
4
4
  {
5
5
  #model;
6
+ #url;
6
7
 
7
8
  constructor() {
8
9
  console.log("construct");
@@ -12,21 +13,17 @@ class aiSettings extends HTMLElement
12
13
  }
13
14
 
14
15
  get model() {
15
- return this.#model?.value || "";
16
+ return this.#model || "";
16
17
  };
17
18
  set model(v) {
18
- console.log(v, this.#model);
19
-
20
- //this.#model = v;
21
-
22
19
  this.shadowRoot.querySelector("#model").value = this.#model = v;
23
-
24
- //this.#model.value = v;
25
-
20
+ };
26
21
 
27
- //if (this.#model) {
28
- // this.#model.value = v;
29
- //}
22
+ get url() {
23
+ return this.#url || "";
24
+ };
25
+ set url(v) {
26
+ this.shadowRoot.querySelector("#url").value = this.#url = v;
30
27
  };
31
28
 
32
29
  connectedCallback() {
@@ -57,21 +54,68 @@ class aiSettings extends HTMLElement
57
54
  display: flex;
58
55
  animation: slideLeft 0.3s ease-out forwards;
59
56
  }
57
+
58
+ .class {
59
+ display: flex;
60
+
61
+ }
60
62
  </style>
61
63
 
62
- <div">
63
- <div>
64
- <label for="model">Model:</label>
65
- <input id="model" value="${this.#model}"/>
66
- </div>
64
+ <div class="line">
65
+ <label for="server">Server:</label>
66
+ <label><input name="server" type="radio" value="openai" checked>Open AI</label>
67
+ <label><input name="server" type="radio" value="ollama">Ollama</label>
68
+ </div>
69
+ <div class="line openai">
70
+ <label>Server: <input id="openaiApiKey" value="${this.openaiApiKey}"/></label>
71
+ </div>
72
+ <div class="line ollama">
73
+ <label>Url: <input id="ollamaUrl" value="${this.ollamaUrl}"/></label>
74
+ </div>
75
+ <div class="line openai">
76
+ <label>
77
+ Model:
78
+ <select id="openaiModel">
79
+ <option value="gpt-4">gpt-4</option>
80
+ <option value="gpt-4o">gpt-4o</option>
81
+ <option value="gpt-3.5-turbo">gpt-3.5-turbo</option>
82
+ </select>
83
+ </label>
84
+ </div>
85
+ <div class="line ollama">
86
+ <label>
87
+ Model:
88
+ <select id="ollamaModel">
89
+ <option value="phi4:14b">phi4:14b</option>
90
+ <option value="llama3.1:8b">llama3.1:8b</option>
91
+ <option value="mistral:7b">mistral:7b</option>
92
+ </select>
93
+ </label>
67
94
  </div>
68
95
  `;
69
96
 
70
- //this.#model = this.shadowRoot.querySelector("#model");
71
-
72
- //console.log(this.#model);
73
- //this.classList.add("ai-settings");
97
+ this.#init();
74
98
  };
99
+
100
+ #init = () => {
101
+
102
+ this.shadowRoot.querySelectorAll('input[name="server"]').forEach((radio) => {
103
+ radio.addEventListener("change", () => {
104
+ const server = this.shadowRoot.querySelector('input[name="server"]:checked').value;
105
+ console.log("선택된 서버:", server);
106
+
107
+ ["openai","ollama"].forEach(v => {
108
+ console.log(v);
109
+ this.shadowRoot.querySelectorAll('.' + v).forEach((elem) => {
110
+ console.log(elem);
111
+ elem.style.display = (server === v) ? "flex" : "none";
112
+ });
113
+ });
114
+ });
115
+ });
116
+
117
+ this.shadowRoot.querySelector('input[name="server"][value="ollama"]').checked = true;
118
+ }
75
119
  }
76
120
 
77
121
  customElements.define("nx-ai-settings", aiSettings);
@@ -27295,6 +27295,7 @@ customElements.define("nx-top-menu", nxTopMenu);
27295
27295
  class aiSettings extends HTMLElement
27296
27296
  {
27297
27297
  #model;
27298
+ #url;
27298
27299
 
27299
27300
  constructor() {
27300
27301
  console.log("construct");
@@ -27304,21 +27305,17 @@ class aiSettings extends HTMLElement
27304
27305
  }
27305
27306
 
27306
27307
  get model() {
27307
- return this.#model?.value || "";
27308
+ return this.#model || "";
27308
27309
  };
27309
27310
  set model(v) {
27310
- console.log(v, this.#model);
27311
-
27312
- //this.#model = v;
27313
-
27314
27311
  this.shadowRoot.querySelector("#model").value = this.#model = v;
27315
-
27316
- //this.#model.value = v;
27317
-
27312
+ };
27318
27313
 
27319
- //if (this.#model) {
27320
- // this.#model.value = v;
27321
- //}
27314
+ get url() {
27315
+ return this.#url || "";
27316
+ };
27317
+ set url(v) {
27318
+ this.shadowRoot.querySelector("#url").value = this.#url = v;
27322
27319
  };
27323
27320
 
27324
27321
  connectedCallback() {
@@ -27349,21 +27346,68 @@ class aiSettings extends HTMLElement
27349
27346
  display: flex;
27350
27347
  animation: slideLeft 0.3s ease-out forwards;
27351
27348
  }
27349
+
27350
+ .class {
27351
+ display: flex;
27352
+
27353
+ }
27352
27354
  </style>
27353
27355
 
27354
- <div">
27355
- <div>
27356
- <label for="model">Model:</label>
27357
- <input id="model" value="${this.#model}"/>
27358
- </div>
27356
+ <div class="line">
27357
+ <label for="server">Server:</label>
27358
+ <label><input name="server" type="radio" value="openai" checked>Open AI</label>
27359
+ <label><input name="server" type="radio" value="ollama">Ollama</label>
27360
+ </div>
27361
+ <div class="line openai">
27362
+ <label>Server: <input id="openaiApiKey" value="${this.openaiApiKey}"/></label>
27363
+ </div>
27364
+ <div class="line ollama">
27365
+ <label>Url: <input id="ollamaUrl" value="${this.ollamaUrl}"/></label>
27366
+ </div>
27367
+ <div class="line openai">
27368
+ <label>
27369
+ Model:
27370
+ <select id="openaiModel">
27371
+ <option value="gpt-4">gpt-4</option>
27372
+ <option value="gpt-4o">gpt-4o</option>
27373
+ <option value="gpt-3.5-turbo">gpt-3.5-turbo</option>
27374
+ </select>
27375
+ </label>
27376
+ </div>
27377
+ <div class="line ollama">
27378
+ <label>
27379
+ Model:
27380
+ <select id="ollamaModel">
27381
+ <option value="phi4:14b">phi4:14b</option>
27382
+ <option value="llama3.1:8b">llama3.1:8b</option>
27383
+ <option value="mistral:7b">mistral:7b</option>
27384
+ </select>
27385
+ </label>
27359
27386
  </div>
27360
27387
  `;
27361
27388
 
27362
- //this.#model = this.shadowRoot.querySelector("#model");
27363
-
27364
- //console.log(this.#model);
27365
- //this.classList.add("ai-settings");
27389
+ this.#init();
27366
27390
  };
27391
+
27392
+ #init = () => {
27393
+
27394
+ this.shadowRoot.querySelectorAll('input[name="server"]').forEach((radio) => {
27395
+ radio.addEventListener("change", () => {
27396
+ const server = this.shadowRoot.querySelector('input[name="server"]:checked').value;
27397
+ console.log("선택된 서버:", server);
27398
+
27399
+ ["openai","ollama"].forEach(v => {
27400
+ console.log(v);
27401
+ this.shadowRoot.querySelectorAll('.' + v).forEach((elem) => {
27402
+ console.log(elem);
27403
+ elem.style.display = (server === v) ? "flex" : "none";
27404
+ });
27405
+ });
27406
+ });
27407
+ });
27408
+
27409
+ this.shadowRoot.querySelector('input[name="server"][value="ollama"]').checked = true;
27410
+ }
27367
27411
  }
27368
27412
 
27369
27413
  customElements.define("nx-ai-settings", aiSettings);
@@ -27293,6 +27293,7 @@ customElements.define("nx-top-menu", nxTopMenu);
27293
27293
  class aiSettings extends HTMLElement
27294
27294
  {
27295
27295
  #model;
27296
+ #url;
27296
27297
 
27297
27298
  constructor() {
27298
27299
  console.log("construct");
@@ -27302,21 +27303,17 @@ class aiSettings extends HTMLElement
27302
27303
  }
27303
27304
 
27304
27305
  get model() {
27305
- return this.#model?.value || "";
27306
+ return this.#model || "";
27306
27307
  };
27307
27308
  set model(v) {
27308
- console.log(v, this.#model);
27309
-
27310
- //this.#model = v;
27311
-
27312
27309
  this.shadowRoot.querySelector("#model").value = this.#model = v;
27313
-
27314
- //this.#model.value = v;
27315
-
27310
+ };
27316
27311
 
27317
- //if (this.#model) {
27318
- // this.#model.value = v;
27319
- //}
27312
+ get url() {
27313
+ return this.#url || "";
27314
+ };
27315
+ set url(v) {
27316
+ this.shadowRoot.querySelector("#url").value = this.#url = v;
27320
27317
  };
27321
27318
 
27322
27319
  connectedCallback() {
@@ -27347,21 +27344,68 @@ class aiSettings extends HTMLElement
27347
27344
  display: flex;
27348
27345
  animation: slideLeft 0.3s ease-out forwards;
27349
27346
  }
27347
+
27348
+ .class {
27349
+ display: flex;
27350
+
27351
+ }
27350
27352
  </style>
27351
27353
 
27352
- <div">
27353
- <div>
27354
- <label for="model">Model:</label>
27355
- <input id="model" value="${this.#model}"/>
27356
- </div>
27354
+ <div class="line">
27355
+ <label for="server">Server:</label>
27356
+ <label><input name="server" type="radio" value="openai" checked>Open AI</label>
27357
+ <label><input name="server" type="radio" value="ollama">Ollama</label>
27358
+ </div>
27359
+ <div class="line openai">
27360
+ <label>Server: <input id="openaiApiKey" value="${this.openaiApiKey}"/></label>
27361
+ </div>
27362
+ <div class="line ollama">
27363
+ <label>Url: <input id="ollamaUrl" value="${this.ollamaUrl}"/></label>
27364
+ </div>
27365
+ <div class="line openai">
27366
+ <label>
27367
+ Model:
27368
+ <select id="openaiModel">
27369
+ <option value="gpt-4">gpt-4</option>
27370
+ <option value="gpt-4o">gpt-4o</option>
27371
+ <option value="gpt-3.5-turbo">gpt-3.5-turbo</option>
27372
+ </select>
27373
+ </label>
27374
+ </div>
27375
+ <div class="line ollama">
27376
+ <label>
27377
+ Model:
27378
+ <select id="ollamaModel">
27379
+ <option value="phi4:14b">phi4:14b</option>
27380
+ <option value="llama3.1:8b">llama3.1:8b</option>
27381
+ <option value="mistral:7b">mistral:7b</option>
27382
+ </select>
27383
+ </label>
27357
27384
  </div>
27358
27385
  `;
27359
27386
 
27360
- //this.#model = this.shadowRoot.querySelector("#model");
27361
-
27362
- //console.log(this.#model);
27363
- //this.classList.add("ai-settings");
27387
+ this.#init();
27364
27388
  };
27389
+
27390
+ #init = () => {
27391
+
27392
+ this.shadowRoot.querySelectorAll('input[name="server"]').forEach((radio) => {
27393
+ radio.addEventListener("change", () => {
27394
+ const server = this.shadowRoot.querySelector('input[name="server"]:checked').value;
27395
+ console.log("선택된 서버:", server);
27396
+
27397
+ ["openai","ollama"].forEach(v => {
27398
+ console.log(v);
27399
+ this.shadowRoot.querySelectorAll('.' + v).forEach((elem) => {
27400
+ console.log(elem);
27401
+ elem.style.display = (server === v) ? "flex" : "none";
27402
+ });
27403
+ });
27404
+ });
27405
+ });
27406
+
27407
+ this.shadowRoot.querySelector('input[name="server"][value="ollama"]').checked = true;
27408
+ }
27365
27409
  }
27366
27410
 
27367
27411
  customElements.define("nx-ai-settings", aiSettings);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "ninegrid2",
3
3
  "type": "module",
4
- "version": "6.108.0",
4
+ "version": "6.110.0",
5
5
  "main": "dist/index.js",
6
6
  "exports": {
7
7
  "import": "./dist/index.js",
@@ -3,6 +3,7 @@
3
3
  class aiSettings extends HTMLElement
4
4
  {
5
5
  #model;
6
+ #url;
6
7
 
7
8
  constructor() {
8
9
  console.log("construct");
@@ -12,21 +13,17 @@ class aiSettings extends HTMLElement
12
13
  }
13
14
 
14
15
  get model() {
15
- return this.#model?.value || "";
16
+ return this.#model || "";
16
17
  };
17
18
  set model(v) {
18
- console.log(v, this.#model);
19
-
20
- //this.#model = v;
21
-
22
19
  this.shadowRoot.querySelector("#model").value = this.#model = v;
23
-
24
- //this.#model.value = v;
25
-
20
+ };
26
21
 
27
- //if (this.#model) {
28
- // this.#model.value = v;
29
- //}
22
+ get url() {
23
+ return this.#url || "";
24
+ };
25
+ set url(v) {
26
+ this.shadowRoot.querySelector("#url").value = this.#url = v;
30
27
  };
31
28
 
32
29
  connectedCallback() {
@@ -57,21 +54,68 @@ class aiSettings extends HTMLElement
57
54
  display: flex;
58
55
  animation: slideLeft 0.3s ease-out forwards;
59
56
  }
57
+
58
+ .class {
59
+ display: flex;
60
+
61
+ }
60
62
  </style>
61
63
 
62
- <div">
63
- <div>
64
- <label for="model">Model:</label>
65
- <input id="model" value="${this.#model}"/>
66
- </div>
64
+ <div class="line">
65
+ <label for="server">Server:</label>
66
+ <label><input name="server" type="radio" value="openai" checked>Open AI</label>
67
+ <label><input name="server" type="radio" value="ollama">Ollama</label>
68
+ </div>
69
+ <div class="line openai">
70
+ <label>Server: <input id="openaiApiKey" value="${this.openaiApiKey}"/></label>
71
+ </div>
72
+ <div class="line ollama">
73
+ <label>Url: <input id="ollamaUrl" value="${this.ollamaUrl}"/></label>
74
+ </div>
75
+ <div class="line openai">
76
+ <label>
77
+ Model:
78
+ <select id="openaiModel">
79
+ <option value="gpt-4">gpt-4</option>
80
+ <option value="gpt-4o">gpt-4o</option>
81
+ <option value="gpt-3.5-turbo">gpt-3.5-turbo</option>
82
+ </select>
83
+ </label>
84
+ </div>
85
+ <div class="line ollama">
86
+ <label>
87
+ Model:
88
+ <select id="ollamaModel">
89
+ <option value="phi4:14b">phi4:14b</option>
90
+ <option value="llama3.1:8b">llama3.1:8b</option>
91
+ <option value="mistral:7b">mistral:7b</option>
92
+ </select>
93
+ </label>
67
94
  </div>
68
95
  `;
69
96
 
70
- //this.#model = this.shadowRoot.querySelector("#model");
71
-
72
- //console.log(this.#model);
73
- //this.classList.add("ai-settings");
97
+ this.#init();
74
98
  };
99
+
100
+ #init = () => {
101
+
102
+ this.shadowRoot.querySelectorAll('input[name="server"]').forEach((radio) => {
103
+ radio.addEventListener("change", () => {
104
+ const server = this.shadowRoot.querySelector('input[name="server"]:checked').value;
105
+ console.log("선택된 서버:", server);
106
+
107
+ ["openai","ollama"].forEach(v => {
108
+ console.log(v);
109
+ this.shadowRoot.querySelectorAll('.' + v).forEach((elem) => {
110
+ console.log(elem);
111
+ elem.style.display = (server === v) ? "flex" : "none";
112
+ });
113
+ });
114
+ });
115
+ });
116
+
117
+ this.shadowRoot.querySelector('input[name="server"][value="ollama"]').checked = true;
118
+ }
75
119
  }
76
120
 
77
121
  customElements.define("nx-ai-settings", aiSettings);