docker with env

.env.example

@@ -0,0 +1,2 @@
+VITE_STABILITY_APIKEY="sk-....."
+APP_PORT=3000

.gitignore

@@ -11,3 +11,4 @@ node_modules
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
+.env

Dockerfile

@@ -0,0 +1,10 @@
+# this can be updated to use a smaller image, customize build steps&stages, etc
+FROM node:latest
+ENV APP_PORT=3000
+WORKDIR /usr/src/app
+COPY package.json yarn.lock ./
+COPY . .
+RUN yarn
+RUN echo "cachebust_1"
+EXPOSE $APP_PORT
+CMD ["yarn", "dev"]

docker-compose.yaml

@@ -0,0 +1,17 @@
+version: '3.9'
+services:
+  app:
+    platform: linux/x86_64
+    container_name: StableStudio
+    env_file: .env
+    restart: always
+    build: .
+    ports:
+      - 3000:3000
+    stdin_open: true
+    tty: true
+    volumes:
+      - .:/usr/src/app
+      - /usr/src/app/.yarn
+      - /usr/src/app/.husky
+      - /usr/src/app/node_modules

package.json

@@ -6,6 +6,7 @@
       "packages/*"
     ]
   },
+  "private": true,
   "scripts": {
     "postinstall": "node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\" && yarn build",
     "stablestudio-plugin": "yarn workspace @stability/stablestudio-plugin",
@@ -16,7 +17,7 @@
     "stablestudio-ui": "yarn workspace @stability/stablestudio-ui",
     "dev:use-example-plugin": "cross-env VITE_USE_EXAMPLE_PLUGIN=true yarn dev",
     "dev": "yarn workspaces foreach --all --interlaced --verbose --parallel --jobs unlimited run dev",
-    "build": "yarn workspaces foreach --all --interlaced --verbose --jobs unlimited run build",
+    "build": "yarn plugin import workspace-tools && yarn workspaces foreach --all --interlaced --verbose --jobs unlimited run build",
     "clean": "yarn workspaces foreach --all --interlaced --verbose --parallel --jobs unlimited run clean && rimraf node_modules"
   },
   "devDependencies": {

packages/stablestudio-plugin-stability/src/index.ts

@@ -11,6 +11,19 @@ import {
   Struct,
 } from "./Proto";
 
+const setApiKeyFromEnvVar = () => {
+  const envApiKey = import.meta.env.VITE_STABILITY_APIKEY;
+
+  const localStorageApiKey = localStorage.getItem("stability-apiKey");
+  if (localStorageApiKey) return localStorageApiKey;
+
+  if (envApiKey) {
+    localStorage.setItem("stability-apiKey", envApiKey);
+    return envApiKey;
+  }
+
+};
+
 const getStableDiffusionDefaultCount = () => 4;
 const getStableDiffusionDefaultInputFromPrompt = (prompt: string) => ({
   prompts: [
@@ -50,7 +63,13 @@ export const createPlugin = StableStudio.createPlugin<{
     | "deleteStableDiffusionImages"
     | "getStatus"
   > => {
+
+    apiKey = setApiKeyFromEnvVar() || apiKey;
+
     if (!apiKey)
+
+
+
       return {
         createStableDiffusionImages: undefined,
         getStableDiffusionExistingImages: undefined,
@@ -427,7 +446,7 @@ export const createPlugin = StableStudio.createPlugin<{
       }),
     };
   };
-
+  
   return {
     ...functionsWhichNeedAPIKey(
       localStorage.getItem("stability-apiKey") ?? undefined
@@ -533,7 +552,6 @@ export const createPlugin = StableStudio.createPlugin<{
         placeholder: "sk-...",
         required: true,
         password: true,
-
         value: localStorage.getItem("stability-apiKey") ?? "",
       },
     },

packages/stablestudio-ui/index.html

@@ -24,6 +24,6 @@
     <div id="modal-root" class="dark overflow-hidden text-white"></div>
     <div id="app" class="dark"></div>
 
-    <script type="module" src="/src/index.tsx"></script>
+    <script type="module" src="./src/index.tsx"></script>
   </body>
 </html>

packages/stablestudio-ui/src/Environment/index.tsx

@@ -8,6 +8,7 @@ declare global {
   interface ImportMetaEnv {
     readonly VITE_GIT_HASH: string;
     readonly VITE_USE_EXAMPLE_PLUGIN: string;
+    readonly VITE_STABILITY_APIKEY: string;
   }
 }
 
@@ -20,6 +21,7 @@ export namespace Environment {
   const variables = {
     VITE_GIT_HASH: import.meta.env.VITE_GIT_HASH,
     VITE_USE_EXAMPLE_PLUGIN: import.meta.env.VITE_USE_EXAMPLE_PLUGIN ?? "false",
+    VITE_STABILITY_APIKEY: import.meta.env.VITE_STABILITY_APIKEY,
   } as const;
 
   export function get(name: VariableName): string {

packages/stablestudio-ui/vite.config.ts

@@ -21,6 +21,7 @@ export default defineConfig(({ mode }) => {
     server: {
       port: 3000,
       fs: { strict: false },
+      host:'0.0.0.0',
     },
 
     optimizeDeps: {

tsconfig.json

@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
     "target": "ESNext",
+    "types": ["vite/client"],
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
 
     "esModuleInterop": true,