✨ feat: Add Share Image

locales/de_DE.json

@@ -159,6 +159,25 @@
       "desc": "Zeigt bessere Bildinformationen im generierten Bild an"
     }
   },
+  "share": "Teilen",
+  "shareModal": {
+    "download": "Screenshot herunterladen",
+    "imageType": "Bildformat",
+    "screenshot": "Screenshot",
+    "settings": "Exporteinstellungen",
+    "withBackground": "Hintergrundbild einbeziehen",
+    "withFooter": "Fußzeile einbeziehen",
+    "warn": "Bitte zuerst ein Bild generieren",
+    "info": "Bildinformationen",
+    "showNegative": "Negative anzeigen",
+    "showConfig": "Konfiguration anzeigen",
+    "title": "Bildname",
+    "tabs": {
+      "info": "Info",
+      "settings": "Einstellungen"
+    },
+    "showAllImages": "Alle Bilder anzeigen"
+  },
   "sidebar": {
     "extraNetwork": "Zusätzliches Netzwerk",
     "quickSetting": "Schnelleinstellung",

locales/en_US.json

@@ -159,6 +159,25 @@
       "desc": "Replace all Emoji icons in stable diffusion webui with SVG icons globally"
     }
   },
+  "share": "Share",
+  "shareModal": {
+    "download": "Download Screenshot",
+    "imageType": "Image Format",
+    "screenshot": "Screenshot",
+    "info": "Image Info",
+    "settings": "Export Settings",
+    "withBackground": "Include Background Image",
+    "withFooter": "Include Footer",
+    "warn": "Please Generate Image First",
+    "showNegative": "Show Negative Promot",
+    "showConfig": "Show Generate Config",
+    "showAllImages": "Show All Images",
+    "title": "Image Name",
+    "tabs": {
+      "info": "Info",
+      "settings": "Settings"
+    }
+  },
   "sidebar": {
     "extraNetwork": "Extra Network",
     "quickSetting": "Quick Setting",

locales/es_ES.json

@@ -159,6 +159,25 @@
       "desc": "Mostrar mejor información de la imagen en la imagen generada"
     }
   },
+  "share": "Compartir",
+  "shareModal": {
+    "download": "Descargar Captura de pantalla",
+    "imageType": "Formato de Imagen",
+    "screenshot": "Captura de pantalla",
+    "settings": "Configuración de Exportación",
+    "withBackground": "Incluir Imagen de Fondo",
+    "withFooter": "Incluir Pie de Página",
+    "warn": "Por favor, Generar la Imagen Primero",
+    "info": "Información de la imagen",
+    "showNegative": "Mostrar promoción negativa",
+    "showConfig": "Mostrar generar configuración",
+    "title": "Nombre de la imagen",
+    "tabs": {
+      "info": "Información",
+      "settings": "Ajustes"
+    },
+    "showAllImages": "Mostrar todas las imágenes"
+  },
   "sidebar": {
     "extraNetwork": "Red adicional",
     "quickSetting": "Configuración rápida",

locales/fr_FR.json

@@ -159,6 +159,25 @@
       "desc": "Afficher de meilleures informations sur l'image dans l'image générée"
     }
   },
+  "share": "Partager",
+  "shareModal": {
+    "download": "Télécharger la capture d'écran",
+    "imageType": "Format d'image",
+    "screenshot": "Capture d'écran",
+    "settings": "Paramètres d'export",
+    "withBackground": "Inclure l'image de fond",
+    "withFooter": "Inclure le pied de page",
+    "warn": "Veuillez d'abord générer l'image",
+    "info": "Informations sur l'image",
+    "showNegative": "Afficher la promotion négative",
+    "showConfig": "Afficher la configuration générée",
+    "title": "Nom de l'image",
+    "tabs": {
+      "info": "Info",
+      "settings": "Paramètres"
+    },
+    "showAllImages": "Afficher toutes les images"
+  },
   "sidebar": {
     "extraNetwork": "Réseau supplémentaire",
     "quickSetting": "Réglage rapide",

locales/ja_JP.json

@@ -159,6 +159,25 @@
       "desc": "生成された画像でより良い画像情報を表示します"
     }
   },
+  "share": "共有",
+  "shareModal": {
+    "download": "スクリーンショットをダウンロード",
+    "imageType": "画像形式",
+    "screenshot": "スクリーンショット",
+    "settings": "エクスポート設定",
+    "withBackground": "背景画像を含める",
+    "withFooter": "フッターを含める",
+    "warn": "まず画像を生成してください",
+    "info": "画像情報",
+    "showNegative": "ネガティブプロモーションを表示",
+    "showConfig": "生成設定を表示",
+    "title": "画像名",
+    "tabs": {
+      "info": "情報",
+      "settings": "設定"
+    },
+    "showAllImages": "すべての画像を表示"
+  },
   "sidebar": {
     "extraNetwork": "追加のネットワーク",
     "quickSetting": "クイック設定",

locales/ko_KR.json

@@ -159,6 +159,25 @@
       "desc": "생성된 이미지에서 더 나은 이미지 정보 표시"
     }
   },
+  "share": "공유",
+  "shareModal": {
+    "download": "스크린샷 다운로드",
+    "imageType": "이미지 형식",
+    "screenshot": "스크린샷",
+    "settings": "내보내기 설정",
+    "withBackground": "배경 이미지 포함",
+    "withFooter": "푸터 포함",
+    "warn": "먼저 이미지를 생성해주세요",
+    "info": "이미지 정보",
+    "showNegative": "부정적 프로모션 표시",
+    "showConfig": "생성 구성 표시",
+    "title": "이미지 이름",
+    "tabs": {
+      "info": "정보",
+      "settings": "설정"
+    },
+    "showAllImages": "모든 이미지 표시"
+  },
   "sidebar": {
     "extraNetwork": "추가 네트워크",
     "quickSetting": "빠른 설정",

locales/pt_BR.json

@@ -159,6 +159,25 @@
       "desc": "Exibir informações melhores da imagem na imagem gerada"
     }
   },
+  "share": "Compartilhar",
+  "shareModal": {
+    "download": "Baixar Captura de Tela",
+    "imageType": "Formato da Imagem",
+    "screenshot": "Captura de Tela",
+    "settings": "Configurações de Exportação",
+    "withBackground": "Incluir Imagem de Fundo",
+    "withFooter": "Incluir Rodapé",
+    "warn": "Por favor, gere a imagem primeiro",
+    "info": "Informações da Imagem",
+    "showNegative": "Mostrar Promoção Negativa",
+    "showConfig": "Mostrar Configuração Gerada",
+    "title": "Nome da Imagem",
+    "tabs": {
+      "info": "Informações",
+      "settings": "Configurações"
+    },
+    "showAllImages": "Mostrar Todas as Imagens"
+  },
   "sidebar": {
     "extraNetwork": "Rede Extra",
     "quickSetting": "Configuração Rápida",

locales/ru_RU.json

@@ -159,6 +159,25 @@
       "desc": "Отображение более подробной информации об изображении в сгенерированном изображении"
     }
   },
+  "share": "Поделиться",
+  "shareModal": {
+    "download": "Скачать скриншот",
+    "imageType": "Формат изображения",
+    "screenshot": "Скриншот",
+    "settings": "Настройки экспорта",
+    "withBackground": "Включить фоновое изображение",
+    "withFooter": "Включить нижний колонтитул",
+    "warn": "Сначала сгенерируйте изображение",
+    "info": "Информация об изображении",
+    "showNegative": "Показать отрицательную рекламу",
+    "showConfig": "Показать генерацию конфигурации",
+    "title": "Название изображения",
+    "tabs": {
+      "info": "Информация",
+      "settings": "Настройки"
+    },
+    "showAllImages": "Показать все изображения"
+  },
   "sidebar": {
     "extraNetwork": "Дополнительная сеть",
     "quickSetting": "Быстрая настройка",

locales/zh_CN.json

@@ -159,6 +159,25 @@
       "desc": "在生成的图像中显示更好的图像信息"
     }
   },
+  "share": "分享",
+  "shareModal": {
+    "download": "下载截图",
+    "imageType": "图片格式",
+    "screenshot": "截图",
+    "settings": "导出设置",
+    "withBackground": "包括背景图片",
+    "withFooter": "包括页脚",
+    "warn": "请先生成图片",
+    "info": "图片信息",
+    "showNegative": "显示负面促销",
+    "showConfig": "显示生成配置",
+    "title": "图片名称",
+    "tabs": {
+      "info": "信息",
+      "settings": "设置"
+    },
+    "showAllImages": "显示所有图片"
+  },
   "sidebar": {
     "extraNetwork": "额外网络",
     "quickSetting": "快速设置",

locales/zh_HK.json

@@ -159,6 +159,25 @@
       "desc": "在生成的圖片中顯示更好的圖片資訊"
     }
   },
+  "share": "分享",
+  "shareModal": {
+    "download": "下載截圖",
+    "imageType": "圖片格式",
+    "screenshot": "截圖",
+    "settings": "匯出設定",
+    "withBackground": "包括背景圖片",
+    "withFooter": "包括頁腳",
+    "warn": "請先生成圖片",
+    "info": "圖片資訊",
+    "showNegative": "顯示負面推廣",
+    "showConfig": "顯示生成配置",
+    "title": "圖片名稱",
+    "tabs": {
+      "info": "資訊",
+      "settings": "設定"
+    },
+    "showAllImages": "顯示所有圖片"
+  },
   "sidebar": {
     "extraNetwork": "額外網絡",
     "quickSetting": "快速設置",

package.json

@@ -76,6 +76,7 @@
     "lodash-es": "^4",
     "lucide-react": "latest",
     "lucide-static": "latest",
+    "modern-screenshot": "^4.4.34",
     "polished": "^4",
     "react": "^18",
     "react-dnd": "^16",

src/app/index.tsx

@@ -14,6 +14,7 @@ import ExtraNetworkSidebar from '../features/ExtraNetworkSidebar';
 import Footer from '../features/Footer';
 import Header from '../features/Header';
 import QuickSettingSidebar from '../features/QuickSettingSidebar';
+import Share from '../features/Share';
 import { useStyles } from './style';
 
 const HEADER_HEIGHT = 64;
@@ -49,6 +50,7 @@ const Index = memo(() => {
           </LayoutSidebar>
         )}
         <Content className={cx(!setting.enableSidebar && styles.quicksettings)} />
+        <Share />
         {setting?.enableExtraNetworkSidebar && (
           <LayoutSidebar
             className={styles.sidebar}

src/features/QuickSettingSidebar/Inner.tsx

@@ -12,9 +12,13 @@ const Inner = memo<DivProps>(() => {
   const sidebarReference = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    const sidebar = gradioApp().querySelector('#quicksettings');
-    if (sidebar) sidebarReference.current?.append(sidebar);
-    consola.success('🤯 [layout] inject - QuickSettingSidebar');
+    try {
+      const sidebar = gradioApp().querySelector('#quicksettings');
+      if (sidebar) sidebarReference.current?.append(sidebar);
+      consola.success('🤯 [layout] inject - QuickSettingSidebar');
+    } catch (error) {
+      consola.error('🤯 [layout] inject - QuickSettingSidebar', error);
+    }
   }, []);
 
   return (