Add support for DALL-E #1358

README.md

@@ -31,7 +31,7 @@ One-Click to deploy well-designed ChatGPT web UI on Vercel.
 - New in v2: create, share and debug your chat tools with prompt templates (mask)
 - Awesome prompts powered by [awesome-chatgpt-prompts-zh](https://github.com/PlexPt/awesome-chatgpt-prompts-zh) and [awesome-chatgpt-prompts](https://github.com/f/awesome-chatgpt-prompts)
 - Automatically compresses chat history to support long conversations while also saving your tokens
-- I18n: English, 简体中文, 繁体中文, 日本語, Español, Italiano, Türkçe, Deutsch
+- I18n: English, 简体中文, 繁体中文, 日本語, Español, Italiano, Türkçe, Deutsch, Tiếng Việt, Русский, Čeština
 
 ## Roadmap
 
@@ -62,7 +62,7 @@ One-Click to deploy well-designed ChatGPT web UI on Vercel.
 - 预制角色功能（面具），方便地创建、分享和调试你的个性化对话
 - 海量的内置 prompt 列表，来自[中文](https://github.com/PlexPt/awesome-chatgpt-prompts-zh)和[英文](https://github.com/f/awesome-chatgpt-prompts)
 - 自动压缩上下文聊天记录，在节省 Token 的同时支持超长对话
-- 多国语言支持：English, 简体中文, 繁体中文, 日本語, Español, Italiano, Türkçe, Deutsch
+- 多国语言支持：English, 简体中文, 繁体中文, 日本語, Español, Italiano, Türkçe, Deutsch, Tiếng Việt, Русский, Čeština
 - 拥有自己的域名？好上加好，绑定后即可在任何地方**无障碍**快速访问
 
 ## 开发计划
@@ -265,6 +265,7 @@ bash <(curl -s https://raw.githubusercontent.com/Yidadaa/ChatGPT-Next-Web/main/s
 [@jhansion](https://github.com/jhansion)
 [@Sha1rholder](https://github.com/Sha1rholder)
 [@AnsonHyq](https://github.com/AnsonHyq)
+[@synwith](https://github.com/synwith)
 
 ### Contributor
 

app/api/openai/typing.ts

@@ -1,9 +1,10 @@
 import type {
   CreateChatCompletionRequest,
   CreateChatCompletionResponse,
+  CreateImageRequestSizeEnum,
 } from "openai";
 
 export type ChatRequest = CreateChatCompletionRequest;
 export type ChatResponse = CreateChatCompletionResponse;
-
+export type ImageRequestSizeEnum = CreateImageRequestSizeEnum;
 export type Updater<T> = (updater: (value: T) => void) => void;

app/components/ImageList.module.scss

@@ -0,0 +1,16 @@
+.imageGrid,
+.imageGridSingle {
+  display: inline-flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
+
+.imageGrid img {
+  max-width: calc(50% - 10px);
+  margin: 5px;
+}
+
+.imageGridSingle img {
+  max-width: 100%;
+  margin: 5px;
+}

app/components/ImageList.tsx

@@ -0,0 +1,20 @@
+import { ImagesResponseDataInner } from "openai";
+import React, { FC } from "react";
+import styles from "./imageList.module.scss";
+
+interface ImageListProps {
+  images?: ImagesResponseDataInner[];
+}
+const ImageList: FC<ImageListProps> = ({ images }) => {
+  const singleImage = images && images.length === 1;
+
+  return (
+    <div className={singleImage ? styles.imageGridSingle : styles.imageGrid}>
+      {images &&
+        images.map((image, index) => (
+          <img key={index} src={image.url} alt={`Image ${index}`} />
+        ))}
+    </div>
+  );
+};
+export default ImageList;

app/components/chat-list.tsx

@@ -16,6 +16,7 @@ import { Link, useNavigate } from "react-router-dom";
 import { Path } from "../constant";
 import { MaskAvatar } from "./mask";
 import { Mask } from "../store/mask";
+import { useRef, useEffect } from "react";
 
 export function ChatItem(props: {
   onClick?: () => void;
@@ -29,6 +30,14 @@ export function ChatItem(props: {
   narrow?: boolean;
   mask: Mask;
 }) {
+  const draggableRef = useRef<HTMLDivElement | null>(null);
+  useEffect(() => {
+    if (props.selected && draggableRef.current) {
+      draggableRef.current?.scrollIntoView({
+        block: "center",
+      });
+    }
+  }, [props.selected]);
   return (
     <Draggable draggableId={`${props.id}`} index={props.index}>
       {(provided) => (
@@ -37,7 +46,10 @@ export function ChatItem(props: {
             props.selected && styles["chat-item-selected"]
           }`}
           onClick={props.onClick}
-          ref={provided.innerRef}
+          ref={(ele) => {
+            draggableRef.current = ele;
+            provided.innerRef(ele);
+          }}
           {...provided.draggableProps}
           {...provided.dragHandleProps}
           title={`${props.title}\n${Locale.ChatItem.ChatItemCount(

app/components/chat.tsx

@@ -25,7 +25,6 @@ import {
   Message,
   SubmitKey,
   useChatStore,
-  BOT_HELLO,
   createMessage,
   useAccessStore,
   Theme,
@@ -560,9 +559,9 @@ export function Chat() {
 
   if (
     context.length === 0 &&
-    session.messages.at(0)?.content !== BOT_HELLO.content
+    session.messages.at(0)?.content !== session.botHello.content
   ) {
-    const copiedHello = Object.assign({}, BOT_HELLO);
+    const copiedHello = Object.assign({}, session.botHello);
     if (!accessStore.isAuthorized()) {
       copiedHello.content = Locale.Error.Unauthorized;
     }
@@ -760,6 +759,8 @@ export function Chat() {
                   )}
                   <Markdown
                     content={message.content}
+                    images={message.images}
+                    image_alt={message.image_alt}
                     loading={
                       (message.preview || message.content.length === 0) &&
                       !isUser

app/components/home.tsx

@@ -64,17 +64,17 @@ export function useSwitchTheme() {
     }
 
     const metaDescriptionDark = document.querySelector(
-      'meta[name="theme-color"][media]',
+      'meta[name="theme-color"][media*="dark"]',
     );
     const metaDescriptionLight = document.querySelector(
-      'meta[name="theme-color"]:not([media])',
+      'meta[name="theme-color"][media*="light"]',
     );
 
     if (config.theme === "auto") {
       metaDescriptionDark?.setAttribute("content", "#151515");
       metaDescriptionLight?.setAttribute("content", "#fafafa");
     } else {
-      const themeColor = getCSSVar("--themeColor");
+      const themeColor = getCSSVar("--theme-color");
       metaDescriptionDark?.setAttribute("content", themeColor);
       metaDescriptionLight?.setAttribute("content", themeColor);
     }

app/components/image-model-config.tsx

@@ -0,0 +1,74 @@
+import {
+  ALL_MODELS,
+  ImageModalConfigValidator,
+  ImageModelConfig,
+  ModalConfigValidator,
+  ModelConfig,
+} from "../store";
+
+import Locale from "../locales";
+import { InputRange } from "./input-range";
+import { Input, List, ListItem, Select } from "./ui-lib";
+import { ImageRequestSizeEnum } from "../api/openai/typing";
+import { CreateImageRequestSizeEnum } from "openai";
+
+export function ImageModelConfigList(props: {
+  imageModelConfig: ImageModelConfig;
+  updateConfig: (updater: (config: ImageModelConfig) => void) => void;
+}) {
+  return (
+    <>
+      <ListItem title={Locale.Settings.ImageModel.Title}>
+        <input value={Locale.Settings.ImageModel.Model} disabled={true} />
+      </ListItem>
+      <ListItem title={Locale.Settings.ImageModel.Command}>
+        <input
+          value={props.imageModelConfig.command}
+          onChange={(e) => {
+            props.updateConfig((config) => {
+              config.command = e.currentTarget.value; // Assign the parsed value
+              return config;
+            });
+          }}
+        />
+      </ListItem>
+      <ListItem title={Locale.Settings.ImageModel.NoOfImage}>
+        <InputRange
+          value={props.imageModelConfig.noOfImage.toString()} // Keep the value as a string
+          onChange={(e) => {
+            const newValue = parseInt(e.currentTarget.value, 10); // Parse the value as an integer
+            if (!isNaN(newValue)) {
+              props.updateConfig((config) => {
+                config.noOfImage = newValue; // Assign the parsed value
+                return config;
+              });
+            }
+          }}
+          min={"1"} // Convert the min value to a string
+          max={"10"} // Convert the max value to a string
+          step={"1"} // Convert the step value to a string
+        />
+      </ListItem>
+      <ListItem title={Locale.Settings.ImageModel.Size}>
+        <Select
+          value={props.imageModelConfig.size}
+          onChange={(e) => {
+            const newSize = ImageModalConfigValidator.size(
+              e.currentTarget.value,
+            );
+            props.updateConfig((config) => {
+              config.size = newSize;
+              return config;
+            });
+          }}
+        >
+          {Object.values(CreateImageRequestSizeEnum).map((v) => (
+            <option value={v} key={v}>
+              {v}
+            </option>
+          ))}
+        </Select>
+      </ListItem>
+    </>
+  );
+}

app/components/markdown.tsx

@@ -1,3 +1,5 @@
+import styles from "./markdown.tsx.module.scss";
+
 import ReactMarkdown from "react-markdown";
 import "katex/dist/katex.min.css";
 import RemarkMath from "remark-math";
@@ -11,7 +13,11 @@ import mermaid from "mermaid";
 
 import LoadingIcon from "../icons/three-dots.svg";
 import React from "react";
-
+import ImagePlaceHolder from "../icons/image-placeholder.svg";
+import ImageError from "../icons/image-error.svg";
+import { IMAGE_PLACEHOLDER } from "../constant";
+import { ImagesResponseDataInner } from "openai";
+import ImageList from "./imageList";
 export function Mermaid(props: { code: string; onError: () => void }) {
   const ref = useRef<HTMLDivElement>(null);
 
@@ -119,6 +125,8 @@ export const MarkdownContent = React.memo(_MarkDownContent);
 export function Markdown(
   props: {
     content: string;
+    images?: ImagesResponseDataInner[];
+    image_alt?: string;
     loading?: boolean;
     fontSize?: number;
     parentRef: RefObject<HTMLDivElement>;
@@ -171,9 +179,24 @@ export function Markdown(
     >
       {inView.current &&
         (props.loading ? (
-          <LoadingIcon />
+          <div className={styles.loader}>
+            {props.image_alt && <MarkdownContent content={props.image_alt} />}
+            {props.image_alt &&
+              (props.image_alt === IMAGE_PLACEHOLDER ? (
+                <ImagePlaceHolder width="100px" height="100px" />
+              ) : (
+                <ImageError width="100px" height="100px" />
+              ))}
+            <LoadingIcon />
+          </div>
         ) : (
-          <MarkdownContent content={props.content} />
+          <div>
+            <MarkdownContent content={props.content} />
+            <div className={styles.content_image}>
+              {props.images && <ImageList images={props.images} />}
+              {props.image_alt && <ImageError width="100px" height="100px" />}
+            </div>
+          </div>
         ))}
     </div>
   );

app/components/markdown.tsx.module.scss

@@ -0,0 +1,10 @@
+.loader {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%; // Adjust as necessary
+}
+.content_image {
+  text-align: center;
+}

app/components/settings.tsx

@@ -40,6 +40,7 @@ import { ErrorBoundary } from "./error";
 import { InputRange } from "./input-range";
 import { useNavigate } from "react-router-dom";
 import { Avatar, AvatarPicker } from "./emoji";
+import { ImageModelConfigList } from "./image-model-config";
 
 function EditPromptModal(props: { id: number; onClose: () => void }) {
   const promptStore = usePromptStore();
@@ -573,13 +574,25 @@ export function Settings() {
         <List>
           <ModelConfigList
             modelConfig={config.modelConfig}
-            updateConfig={(upater) => {
+            updateConfig={(updater) => {
               const modelConfig = { ...config.modelConfig };
-              upater(modelConfig);
+              updater(modelConfig);
               config.update((config) => (config.modelConfig = modelConfig));
             }}
           />
         </List>
+        <List>
+          <ImageModelConfigList
+            imageModelConfig={config.imageModelConfig}
+            updateConfig={(upater) => {
+              const imageModelConfig = { ...config.imageModelConfig };
+              upater(imageModelConfig);
+              config.update(
+                (config) => (config.imageModelConfig = imageModelConfig),
+              );
+            }}
+          />
+        </List>
 
         {shouldShowPromptModal && (
           <UserPromptModal onClose={() => setShowPromptModal(false)} />

app/constant.ts

@@ -40,3 +40,6 @@ export const NARROW_SIDEBAR_WIDTH = 100;
 export const ACCESS_CODE_PREFIX = "ak-";
 
 export const LAST_INPUT_KEY = "last-input";
+export const IMAGE_PLACEHOLDER = "Loading your image...";
+export const IMAGE_ERROR = "IMAGE_ERROR";
+export const COMMAND_IMAGE = "/image";