;
10 | export type PageKey = keyof (typeof pages)[P];
11 |
12 | const i18nDataEnUS = {
13 | "*": _global,
14 | ...pages,
15 | };
16 | export default i18nDataEnUS;
17 |
--------------------------------------------------------------------------------
/src/i18n/zh-CN.ts:
--------------------------------------------------------------------------------
1 | import type { PagePath } from "./pagePath";
2 |
3 | import _global from "@i18n/zh-CN/$.json";
4 | import _index from "@i18n/zh-CN/_.json";
5 |
6 | export type GlobalKey = keyof typeof _global;
7 | const pages = {
8 | "/": _index,
9 | } satisfies Record;
10 | export type PageKey = keyof (typeof pages)[P];
11 |
12 | const i18nDataZhCN = {
13 | "*": _global,
14 | ...pages,
15 | };
16 | export default i18nDataZhCN;
17 |
--------------------------------------------------------------------------------
/src/assets/icons/image-polaroid.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/ChakraUI/index.ts:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | export {
4 | Avatar,
5 | Box,
6 | Flex,
7 | Heading,
8 | Spacer,
9 | Tooltip,
10 | Link,
11 | Breadcrumb,
12 | BreadcrumbItem,
13 | BreadcrumbLink,
14 | Button,
15 | Stack,
16 | Text,
17 | IconButton,
18 | Menu,
19 | MenuButton,
20 | MenuItem,
21 | MenuList,
22 | Input,
23 | Container,
24 | SimpleGrid,
25 | Card,
26 | CardBody,
27 | CardHeader,
28 | AlertIcon,
29 | AlertTitle,
30 | Alert,
31 | } from "@chakra-ui/react";
32 |
--------------------------------------------------------------------------------
/src/app/[lang]/not-found.tsx:
--------------------------------------------------------------------------------
1 | /// https://stackoverflow.com/a/75625136
2 |
3 | import Link from "next/link";
4 |
5 | export default function NotFound() {
6 | return (
7 |
8 |
nOT foUnD – 404!
9 |
10 |
14 | Go back to Home
15 |
16 |
17 |
30 |
31 |
32 | );
33 | }
34 |
35 | export default Page;
36 |
--------------------------------------------------------------------------------
/src/configs/constants.ts:
--------------------------------------------------------------------------------
1 | export const SITE_TITLE = "ClickPrompt";
2 | export const SITE_URL = "https://www.chatvisualnovel.com/";
3 | export const SITE_LOCALE_COOKIE = "CLICKPROMPT_LOCALE";
4 | export const SITE_USER_COOKIE = "CLICKPROMPT_USER";
5 | export const GITHUB_URL =
6 | "https://github.com/prompt-engineering/chat-diffusion";
7 | export const CP_GITHUB_ASSETS = `${GITHUB_URL}/tree/master/src/assets/`;
8 | export const SITE_INTERNAL_HEADER_URL = "$$$x-url";
9 | export const SITE_INTERNAL_HEADER_PATHNAME = "$$$x-pathname";
10 | export const SITE_INTERNAL_HEADER_LOCALE = "$$$x-locale";
11 | export const CHAT_COMPLETION_URL = "https://api.openai.com/v1/chat/completions";
12 | export const CHAT_COMPLETION_CONFIG = {
13 | model: "gpt-3.5-turbo",
14 | temperature: 0.5,
15 | max_tokens: 512,
16 | };
17 | export const HUGGINGFACE_INFERENCE_URL = "https://api-inference.huggingface.co";
18 | export const HUGGINGFACE_DEFAULT_STABLE_DIFFUSION_MODEL =
19 | "prompthero/openjourney";
20 | export const HUGGINGFACE_DEEPDANBOORU_SPACE_URL =
21 | "wss://hysts-deepdanbooru.hf.space/queue/join";
22 |
--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
1 | name: ci
2 |
3 | on:
4 | push:
5 | branches: [dev, master]
6 | pull_request:
7 | branches: [dev]
8 |
9 | jobs:
10 | build:
11 | name: Build & Test
12 | runs-on: ubuntu-latest
13 | strategy:
14 | matrix:
15 | node-version: ["lts/gallium", "lts/hydrogen", "current"]
16 | steps:
17 | - name: Checkout 🛎️
18 | uses: actions/checkout@v3
19 | with:
20 | persist-credentials: false
21 |
22 | - uses: actions/setup-node@v3
23 | with:
24 | node-version: 16
25 |
26 | - run: npm ci
27 |
28 | - run: npm run test
29 |
30 | - run: npm run build --if-present
31 | lint:
32 | name: format and lint
33 | runs-on: ubuntu-latest
34 | steps:
35 | - name: Checkout 🛎️
36 | uses: actions/checkout@v3
37 | with:
38 | persist-credentials: false
39 |
40 | - uses: actions/setup-node@v3
41 | with:
42 | node-version: 16
43 | - run: npm ci
44 |
45 | - run: npm run format
46 |
47 | - run: npm run lint
48 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2023 Prompt Engineering
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/src/components/CopyComponent.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { CopyToClipboard } from "react-copy-to-clipboard";
4 | import { CopyIcon } from "@chakra-ui/icons";
5 | import React from "react";
6 | import { Tooltip, useToast } from "@chakra-ui/react";
7 |
8 | type CopyProps = {
9 | value: string;
10 | boxSize?: number;
11 | className?: string;
12 | children?: React.ReactNode;
13 | };
14 |
15 | function CopyComponent({
16 | value,
17 | className = "",
18 | children,
19 | boxSize = 8,
20 | }: CopyProps) {
21 | const toast = useToast();
22 | return (
23 |
24 |
{
27 | toast({
28 | title: "Copied to clipboard",
29 | position: "top",
30 | status: "success",
31 | });
32 | }}
33 | >
34 |
35 | {children ? children : ""}
36 |
37 |
38 |
39 |
40 |
41 |
39 | {/* @ts-expect-error Async Server Component */}
40 |
41 |
42 |
47 | {children}
48 |
49 |
50 |
51 |
52 | );
53 | }
54 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # ChatDiffusion - A ChatGPT web UI that integrates with variety of online Stable Diffusion services
2 |
3 | [](https://github.com/prompt-engineering/chat-diffusion/actions/workflows/ci.yml)
4 | 
5 | [](https://discord.gg/FSWXq4DmEj)
6 |
7 | English | [简体中文](./README.zh-CN.md)
8 |
9 | 
10 |
11 | Online Demo: [https://chat.fluoritestudio.com](https://chat.fluoritestudio.com)
12 |
13 | Join us:
14 |
15 | [](https://discord.gg/FSWXq4DmEj)
16 |
17 | ## Only support client-side (browser) call to OpenAI at this moment. Server-side WIP.
18 |
19 | ## Supported online services:
20 |
21 | - [x] Hugging Face [Inference API](https://huggingface.co/inference-api) for Text to Image
22 | - [x] Using [prompthero/openjourney](https://huggingface.co/prompthero/openjourney) as default Stable Diffusion model, you can ask ChatGPT to change the "model" value in JSON to any model hosted on Hugging Face that has public inference API enabled.
23 | - [ ] Hugging Face Space integration for Image to Text
24 | - [x] [DeepDanbooru](https://huggingface.co/spaces/hysts/DeepDanbooru) (WIP)
25 |
26 | ## Local Usage
27 |
28 | 1. Clone the [ChatDiffusion](https://github.com/prompt-engineering/chat-diffusion) from GitHub.
29 | 2. Run `npm install`.
30 | 3. You can now use the application by running `npm run dev`.
31 |
32 | ## LICENSE
33 |
34 | This code is distributed under the MIT license. See [LICENSE](./LICENSE) in this directory.
35 |
--------------------------------------------------------------------------------
/src/assets/clickprompt-light.svg:
--------------------------------------------------------------------------------
1 |
17 |
--------------------------------------------------------------------------------
/src/components/LocaleSwitcher.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { SITE_LOCALE_COOKIE } from "@/configs/constants";
4 | import {
5 | Box,
6 | Menu,
7 | MenuButton,
8 | MenuList,
9 | MenuItem,
10 | } from "@/components/ChakraUI";
11 | import { ChevronDownIcon } from "@/components/ChakraUI/icons";
12 |
13 | const options = [
14 | {
15 | value: "zh-CN",
16 | label: "中文",
17 | },
18 | {
19 | value: "en-US",
20 | label: "English",
21 | },
22 | ];
23 | export default function LocaleSwitcher({ locale }: { locale: string }) {
24 | const classZh = locale === "zh-CN" ? "text-blue-500" : "text-gray-500";
25 | const classEn = locale === "en-US" ? "text-blue-500" : "text-gray-500";
26 | function setEn() {
27 | document.cookie = `${SITE_LOCALE_COOKIE}=en-US;path=/;max-age=31536000;`;
28 | window.location.reload();
29 | }
30 |
31 | function setZh() {
32 | document.cookie = `${SITE_LOCALE_COOKIE}=zh-CN;path=/;max-age=31536000;`;
33 | window.location.reload();
34 | }
35 |
36 | return (
37 |
38 |
61 |
62 | );
63 | }
64 |
--------------------------------------------------------------------------------
/src/utils/type.util.ts:
--------------------------------------------------------------------------------
1 | import { ChatCompletionRequestMessage } from "openai";
2 |
3 | export type RequestSend = {
4 | action: "send";
5 | conversation_id: number;
6 | messages: ChatCompletionRequestMessage[];
7 | };
8 | export type ResponseSend = {
9 | id: number | undefined;
10 | conversation_id: number;
11 | role: string;
12 | content: string;
13 | name: string | undefined;
14 | created_at: string | undefined;
15 | }[];
16 |
17 | export type RequestGetChats = {
18 | action: "get_chats";
19 | conversation_id: number;
20 | };
21 |
22 | export type ResponseGetChats = {
23 | id: number | undefined;
24 | conversation_id: number;
25 | role: string;
26 | content: string;
27 | name: string | undefined;
28 | created_at: string | undefined;
29 | }[];
30 |
31 | export type RequestCreateConversation = {
32 | action: "create_conversation";
33 | name: string;
34 | };
35 |
36 | export type ResponseCreateConversation =
37 | | {
38 | id: number | undefined;
39 | name: string;
40 | created_at: string | undefined;
41 | user_id: number;
42 | deleted: number | undefined;
43 | }
44 | | null
45 | | undefined;
46 |
47 | export type RequestGetConversations = {
48 | action: "get_conversations";
49 | };
50 |
51 | export type ResponseGetConversations = {
52 | id: number | undefined;
53 | name: string;
54 | created_at: string | undefined;
55 | user_id: number;
56 | }[];
57 |
58 | export type RequestChangeConversationName = {
59 | action: "change_conversation_name";
60 | conversation_id: number;
61 | name: string;
62 | };
63 |
64 | export type RequestDeleteConversation = {
65 | action: "delete_conversation";
66 | conversation_id: number;
67 | };
68 |
69 | export type RequestDeleteAllConversation = {
70 | action: "delete_all_conversations";
71 | };
72 | export type ResponseDeleteAllConversation = {
73 | message?: string;
74 | error?: string;
75 | };
76 |
77 | export type DeepDanbooruTag = {
78 | label: string;
79 | confidence: number;
80 | };
81 |
--------------------------------------------------------------------------------
/src/api/user.ts:
--------------------------------------------------------------------------------
1 | import fetch from "node-fetch";
2 | import { SITE_INTERNAL_HEADER_URL } from "@/configs/constants";
3 | import * as EdgeUser from "./edge/user";
4 |
5 | export async function logout() {
6 | if (EdgeUser.isClientSideOpenAI()) return EdgeUser.logout();
7 | const response = await fetch("/api/chatgpt/user", {
8 | method: "POST",
9 | body: JSON.stringify({
10 | action: "logout",
11 | }),
12 | });
13 | return response.json();
14 | }
15 |
16 | export async function login(key: string, token: string) {
17 | if (EdgeUser.isClientSideOpenAI()) return EdgeUser.saveApiKey(key, token);
18 | const response = await fetch("/api/chatgpt/user", {
19 | method: "POST",
20 | body: JSON.stringify({
21 | action: "login",
22 | key,
23 | }),
24 | }).then((it) => it.json());
25 |
26 | if ((response as any).error) {
27 | alert("Error(login): " + JSON.stringify((response as any).error));
28 | return;
29 | }
30 |
31 | return response;
32 | }
33 |
34 | export async function isLoggedIn(hashedKey?: string) {
35 | if (typeof window !== "undefined" && typeof document !== "undefined") {
36 | // Client-side
37 | if (EdgeUser.isClientSideOpenAI())
38 | return EdgeUser.getApiKey() && EdgeUser.getToken() ? true : false;
39 | const response = await fetch("/api/chatgpt/verify", {
40 | method: "POST",
41 | body: hashedKey ?? "NOPE",
42 | }).then((it) => it.json());
43 |
44 | return (response as any).loggedIn;
45 | }
46 |
47 | // const { headers } = await import("next/headers");
48 | // const urlStr = headers().get(SITE_INTERNAL_HEADER_URL) as string;
49 | // // Propagate cookies to the API route
50 | // const headersPropagated = { cookie: headers().get("cookie") as string };
51 | // const response = await fetch(
52 | // new URL("/api/chatgpt/verify", new URL(urlStr)),
53 | // {
54 | // method: "POST",
55 | // body: hashedKey ?? "NOPE",
56 | // headers: headersPropagated,
57 | // redirect: "follow",
58 | // }
59 | // ).then((it) => it.json());
60 | // return (response as any).loggedIn;
61 | }
62 |
--------------------------------------------------------------------------------
/src/middleware.ts:
--------------------------------------------------------------------------------
1 | import { NextMiddleware, NextResponse } from "next/server";
2 | import {
3 | SupportedLocales,
4 | getLocale,
5 | replaceRouteLocale,
6 | getLocaleFromPath,
7 | SupportedLocale,
8 | } from "@/i18n";
9 | import {
10 | SITE_INTERNAL_HEADER_LOCALE,
11 | SITE_INTERNAL_HEADER_PATHNAME,
12 | SITE_INTERNAL_HEADER_URL,
13 | SITE_LOCALE_COOKIE,
14 | } from "@/configs/constants";
15 |
16 | export const middleware: NextMiddleware = (request) => {
17 | // Check if there is any supported locale in the pathname
18 | const pathname = request.nextUrl.pathname;
19 | const pathnameIsMissingLocale = SupportedLocales.every(
20 | (locale) => !pathname.startsWith(`/${locale}/`) && pathname !== `/${locale}`
21 | );
22 |
23 | let locale = getLocale(request.headers);
24 |
25 | const cookie = request.cookies.get(SITE_LOCALE_COOKIE)?.value;
26 | // If there is a cookie, and it is a supported locale, use it
27 | if (SupportedLocales.includes(cookie as unknown as SupportedLocale)) {
28 | locale = cookie as unknown as SupportedLocale;
29 | }
30 |
31 | // Redirect if there is no locale
32 | if (pathnameIsMissingLocale) {
33 | // e.g. incoming request is /products
34 | // The new URL is now /en-US/products
35 | return NextResponse.redirect(
36 | new URL(`/${locale}/${pathname}`, request.url)
37 | );
38 | } else if (getLocaleFromPath(pathname) !== locale) {
39 | return NextResponse.redirect(
40 | new URL(replaceRouteLocale(pathname, locale), request.url)
41 | );
42 | }
43 |
44 | // ref: https://github.com/vercel/next.js/issues/43704#issuecomment-1411186664
45 | // for server component to access url and pathname
46 | // Store current request url in a custom header, which you can read later
47 | const requestHeaders = new Headers(request.headers);
48 | requestHeaders.set(SITE_INTERNAL_HEADER_URL, request.url);
49 | requestHeaders.set(SITE_INTERNAL_HEADER_PATHNAME, request.nextUrl.pathname);
50 | requestHeaders.set(SITE_INTERNAL_HEADER_LOCALE, locale);
51 |
52 | return NextResponse.next({
53 | request: {
54 | // Apply new request headers
55 | headers: requestHeaders,
56 | },
57 | });
58 | };
59 |
60 | export const config = {
61 | matcher: [
62 | // Skip all internal paths (_next)
63 | "/((?!_next|favicon|api).*)",
64 | // Optional: only run on root (/) URL
65 | // '/'
66 | ],
67 | };
68 |
--------------------------------------------------------------------------------
/src/components/SimpleColorPicker.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from "react";
2 | import { ChromePicker, ColorResult } from "react-color";
3 | import styled from "@emotion/styled";
4 | import nearestColor from "nearest-color";
5 | import colorNameList from "color-name-list";
6 |
7 | export enum ColorType {
8 | HumanSkin = "HumanSkin",
9 | Normal = "Normal",
10 | }
11 |
12 | type SimpleColorProps = {
13 | colorType?: ColorType;
14 | initColor?: string;
15 | updateColor?: (color: string) => void;
16 | };
17 |
18 | const colorNameMap: Record = colorNameList.reduce(
19 | (o, { name, hex }) => Object.assign(o, { [name]: hex }),
20 | {}
21 | );
22 | const nearest = nearestColor.from(colorNameMap);
23 | const hexToRgbString = (hex: string) => {
24 | const { rgb } = nearest(hex);
25 | return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
26 | };
27 | const defaultColor = "rgb(255, 255, 255)";
28 |
29 | function SimpleColorPicker(props: SimpleColorProps) {
30 | const [color, setColor] = useState(defaultColor);
31 | const [displayColorPicker, setDisplayColorPicker] = useState(false);
32 |
33 | useEffect(() => {
34 | const initColor =
35 | props.initColor && colorNameMap[props.initColor.replace(/ color$/, "")];
36 | setColor(initColor ? hexToRgbString(initColor) : defaultColor);
37 | }, [props.initColor]);
38 |
39 | const handleClick = () => {
40 | setDisplayColorPicker(!displayColorPicker);
41 | };
42 |
43 | const handleClose = () => {
44 | setDisplayColorPicker(false);
45 | };
46 |
47 | const handleChange = (color: ColorResult) => {
48 | const newColor = `rgba(${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b}, ${color.rgb.a})`;
49 | setColor(newColor);
50 | if (props.updateColor) {
51 | const colorName = nearest(color.hex).name;
52 | // we should add color after the color name, so the StableDiffusion can parse it
53 | props.updateColor(colorName + " color");
54 | }
55 | };
56 |
57 | return (
58 | <>
59 |
60 |
61 |
62 | {displayColorPicker && (
63 |
64 |
65 |
66 |
67 | )}
68 |
69 | );
70 | }
71 |
72 | const StyleColor = styled.div`
73 | width: 16px;
74 | height: 14px;
75 | border-radius: 2px;
76 | background: ${(props) => props.color};
77 | `;
78 |
79 | const Swatch = styled.div`
80 | display: inline-block;
81 | padding: 1px;
82 | top: 4px;
83 | left: 4px;
84 | position: relative;
85 | background: #fff;
86 | border-radius: 1px;
87 | box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
88 | cursor: pointer;
89 | `;
90 |
91 | const StylePopover = styled.div`
92 | position: absolute;
93 | z-index: 2;
94 | `;
95 |
96 | const StyleCover = styled.div`
97 | position: fixed;
98 | top: 0;
99 | right: 0;
100 | bottom: 0;
101 | left: 0;
102 | `;
103 |
104 | export default SimpleColorPicker;
105 |
--------------------------------------------------------------------------------
/src/api/edge/conversation.ts:
--------------------------------------------------------------------------------
1 | import {
2 | ResponseCreateConversation,
3 | ResponseDeleteAllConversation,
4 | ResponseGetConversations,
5 | } from "@/utils/type.util";
6 | import { WebStorage } from "@/storage/webstorage";
7 | import { deleteAllChats, deleteChatsByConversationId } from "./chat";
8 |
9 | function getConversationById(
10 | id: number,
11 | conversations: ResponseGetConversations
12 | ) {
13 | for (const _index in conversations) {
14 | const _conversation = conversations[_index];
15 | if (_conversation.id == id)
16 | return {
17 | conversation: _conversation,
18 | index: parseInt(_index),
19 | };
20 | }
21 | }
22 |
23 | export function getConversations() {
24 | const _conversationsRepo = new WebStorage(
25 | "o:convo"
26 | );
27 | const _conversations =
28 | _conversationsRepo.get() ?? [];
29 | return _conversations as ResponseGetConversations;
30 | }
31 |
32 | export function createConversation(name?: string) {
33 | const _conversationsRepo = new WebStorage(
34 | "o:convo"
35 | );
36 | const _conversations =
37 | _conversationsRepo.get() ?? [];
38 | let nextIndex = 1;
39 | for (const _index in _conversations) {
40 | if ((_conversations[_index].id ?? 0) >= nextIndex)
41 | nextIndex = (_conversations[_index].id ?? 0) + 1;
42 | }
43 | const _newConversation = {
44 | id: nextIndex,
45 | name: name ?? "Default name",
46 | created_at: Date.now().toString(),
47 | user_id: 0,
48 | deleted: 0,
49 | };
50 | _conversations.push(_newConversation);
51 | _conversationsRepo.set(_conversations);
52 |
53 | return _newConversation as ResponseCreateConversation;
54 | }
55 |
56 | export function changeConversationName(conversationId: number, name: string) {
57 | const _conversationsRepo = new WebStorage(
58 | "o:convo"
59 | );
60 | const _conversations =
61 | _conversationsRepo.get() ?? [];
62 | const _result = getConversationById(conversationId, _conversations);
63 | if (!_result) return;
64 | _result.conversation.name = name;
65 | _conversationsRepo.set(_conversations);
66 |
67 | return _result.conversation as ResponseCreateConversation;
68 | }
69 |
70 | export function deleteConversation(conversationId: number) {
71 | const _conversationsRepo = new WebStorage(
72 | "o:convo"
73 | );
74 | const _conversations =
75 | _conversationsRepo.get() ?? [];
76 | const _result = getConversationById(conversationId, _conversations);
77 | if (!_result) return;
78 | deleteChatsByConversationId(conversationId);
79 | _conversations.splice(_result.index, 1);
80 | _conversationsRepo.set(_conversations);
81 | return _result.conversation as ResponseCreateConversation;
82 | }
83 |
84 | export async function deleteAllConversations() {
85 | const _conversationsRepo = new WebStorage(
86 | "o:convo"
87 | );
88 | deleteAllChats();
89 | _conversationsRepo.set([]);
90 | return {} as ResponseDeleteAllConversation;
91 | }
92 |
--------------------------------------------------------------------------------
/src/api/chat.ts:
--------------------------------------------------------------------------------
1 | import {
2 | RequestGetChats,
3 | RequestSend,
4 | ResponseGetChats,
5 | ResponseSend,
6 | } from "@/utils/type.util";
7 | import nodeFetch from "node-fetch";
8 | import { isClientSideOpenAI } from "@/api/edge/user";
9 | import * as EdgeChat from "@/api/edge/chat";
10 |
11 | export async function getChatsByConversationId(
12 | conversationId: number,
13 | withSystem?: boolean
14 | ) {
15 | if (isClientSideOpenAI())
16 | return EdgeChat.getChatsByConversationId(
17 | conversationId,
18 | withSystem
19 | ) as ResponseGetChats;
20 | const response = await nodeFetch("/api/chatgpt/chat", {
21 | method: "POST",
22 | body: JSON.stringify({
23 | action: "get_chats",
24 | conversation_id: conversationId,
25 | } as RequestGetChats),
26 | });
27 | const data = (await response.json()) as ResponseGetChats;
28 | if (!response.ok) {
29 | alert("Error: " + JSON.stringify((data as any).error));
30 | return null;
31 | }
32 |
33 | if (!data) {
34 | alert("Error(getChatsByConversationId): sOmeTHiNg wEnT wRoNg");
35 | return null;
36 | }
37 |
38 | return data;
39 | }
40 |
41 | export async function saveChat(
42 | conversationId: number,
43 | message: {
44 | role: string;
45 | content: string;
46 | }
47 | ) {
48 | if (isClientSideOpenAI())
49 | return EdgeChat.saveChat(conversationId, message) as ResponseGetChats;
50 | const response = await nodeFetch("/api/chatgpt/chat", {
51 | method: "POST",
52 | body: JSON.stringify({
53 | action: "save_chat",
54 | conversation_id: conversationId,
55 | message: message,
56 | }),
57 | });
58 | const data = (await response.json()) as ResponseGetChats;
59 | if (!response.ok) {
60 | alert("Error: " + JSON.stringify((data as any).error));
61 | return null;
62 | }
63 |
64 | if (!data) {
65 | alert("Error(getChatsByConversationId): sOmeTHiNg wEnT wRoNg");
66 | return null;
67 | }
68 |
69 | return data;
70 | }
71 |
72 | export async function sendMessage(
73 | conversationId: number,
74 | message: string,
75 | name?: string
76 | ) {
77 | if (isClientSideOpenAI())
78 | return (await EdgeChat.sendMessage(
79 | conversationId,
80 | message,
81 | name
82 | )) as ResponseSend;
83 | const response = await nodeFetch("/api/chatgpt/chat", {
84 | method: "POST",
85 | body: JSON.stringify({
86 | action: "send",
87 | conversation_id: conversationId,
88 | messages: [
89 | {
90 | role: "user",
91 | content: message,
92 | name: name ?? undefined,
93 | },
94 | ],
95 | } as RequestSend),
96 | });
97 | if (!response.ok) {
98 | throw new Error(await response.text());
99 | }
100 | const data = (await response.json()) as ResponseSend;
101 | if (!data) {
102 | throw new Error("Empty response");
103 | }
104 | return data;
105 | }
106 |
107 | export async function sendMsgWithStreamRes(
108 | conversationId: number,
109 | message: string,
110 | name?: string
111 | ) {
112 | const response = await fetch("/api/chatgpt/stream", {
113 | method: "POST",
114 | headers: { Accept: "text/event-stream" },
115 | body: JSON.stringify({
116 | action: "send_stream",
117 | conversation_id: conversationId,
118 | messages: [
119 | {
120 | role: "user",
121 | content: message,
122 | name: name ?? undefined,
123 | },
124 | ],
125 | }),
126 | });
127 |
128 | if (!response.ok) {
129 | alert("Error: " + response.statusText);
130 | return;
131 | }
132 | if (response.body == null) {
133 | alert("Error: sOmeTHiNg wEnT wRoNg");
134 | return;
135 | }
136 | return response.body;
137 | }
138 |
--------------------------------------------------------------------------------
/src/i18n/index.ts:
--------------------------------------------------------------------------------
1 | import { match } from "@formatjs/intl-localematcher";
2 | import Negotiator from "negotiator";
3 |
4 | const dictionaries = {
5 | "en-US": () => import("./en-US").then((module) => module.default),
6 | "zh-CN": () => import("./zh-CN").then((module) => module.default),
7 | };
8 |
9 | export type SupportedLocale = keyof typeof dictionaries;
10 | export const SupportedLocales = Object.keys(dictionaries) as SupportedLocale[];
11 | export const DefaultLocale: SupportedLocale = "zh-CN";
12 |
13 | export function stripLocaleInPath(pathname: string): PagePath {
14 | const splits = pathname.split("/");
15 | const locale = splits[1];
16 |
17 | let striped: PagePath;
18 | if (SupportedLocales.includes(locale as SupportedLocale)) {
19 | striped = pathname.replace(`/${locale}`, "") as PagePath;
20 | } else {
21 | striped = pathname as PagePath;
22 | }
23 |
24 | // todo: we read to read routes from Next.js
25 | if (splits.length == 5 && hadChildRoutes.includes(splits[2])) {
26 | striped = `/${splits[2]}/$` as PagePath;
27 | }
28 |
29 | return striped;
30 | }
31 |
32 | export function getLocaleFromPath(pathname: string): SupportedLocale {
33 | const locale = pathname.split("/")[1];
34 | if (SupportedLocales.includes(locale as SupportedLocale)) {
35 | return locale as SupportedLocale;
36 | }
37 |
38 | return DefaultLocale;
39 | }
40 |
41 | export function replaceRouteLocale(
42 | pathname: string,
43 | locale: SupportedLocale
44 | ): string {
45 | const currentLocale = pathname.split("/")[1];
46 | if (SupportedLocales.includes(currentLocale as SupportedLocale)) {
47 | return pathname.replace(`/${currentLocale}`, `/${locale}`);
48 | }
49 |
50 | return `/${locale}${pathname}`;
51 | }
52 |
53 | export function getLocale(headers: Headers): SupportedLocale {
54 | const languages = new Negotiator({
55 | headers: [...headers].reduce(
56 | (pre: Record, [key, value]) => {
57 | pre[key] = value;
58 | return pre;
59 | },
60 | {}
61 | ),
62 | }).languages();
63 |
64 | let locale: SupportedLocale;
65 | try {
66 | locale = match(
67 | languages,
68 | SupportedLocales,
69 | DefaultLocale
70 | ) as SupportedLocale;
71 | } catch (error) {
72 | locale = DefaultLocale;
73 | }
74 |
75 | return locale;
76 | }
77 |
78 | import type {
79 | GlobalKey as GlobalKeyEnUS,
80 | PageKey as PageKeyEnUS,
81 | } from "./en-US";
82 | import type {
83 | GlobalKey as GlobalKeyZhCN,
84 | PageKey as PageKeyZhCN,
85 | } from "./zh-CN";
86 |
87 | export type AppData = {
88 | i18n: {
89 | g: (key: GlobalKeyEnUS | GlobalKeyZhCN) => string;
90 | tFactory: (
91 | path: P
92 | ) => (key: PageKeyEnUS
| PageKeyZhCN
) => string;
93 | dict: Record;
94 | };
95 | pathname: string;
96 | locale: SupportedLocale;
97 | };
98 | export type AppDataI18n = AppData["i18n"];
99 |
100 | import {
101 | SITE_INTERNAL_HEADER_LOCALE,
102 | SITE_INTERNAL_HEADER_PATHNAME,
103 | } from "@/configs/constants";
104 | import { hadChildRoutes, PagePath } from "./pagePath";
105 |
106 | export async function getAppData(): Promise {
107 | let pathname: PagePath = "/";
108 | let locale = DefaultLocale;
109 |
110 | try {
111 | const { headers } = await import("next/headers");
112 | pathname = (headers().get(SITE_INTERNAL_HEADER_PATHNAME) ||
113 | "/") as PagePath;
114 | locale = headers().get(SITE_INTERNAL_HEADER_LOCALE) as SupportedLocale;
115 | } catch (error) {
116 | console.log(error);
117 | }
118 |
119 | const dictionary = dictionaries[locale] ?? dictionaries[DefaultLocale];
120 | const stripedPathname = stripLocaleInPath(pathname);
121 | return dictionary().then((module) => ({
122 | i18n: {
123 | g: (key) => module["*"][key],
124 | tFactory: (_) => (key) =>
125 | (module[stripedPathname] as any)[key as any] as any,
126 | dict: module[stripedPathname],
127 | },
128 | pathname: stripedPathname,
129 | locale,
130 | }));
131 | }
132 |
--------------------------------------------------------------------------------
/src/assets/icons/gpt.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/components/chatgpt/LoginPage.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { Button, Input } from "@/components/ChakraUI";
4 | import React, { Dispatch, SetStateAction } from "react";
5 | import * as UserApi from "@/api/user";
6 |
7 | export const LoginPage = ({
8 | dict,
9 | setIsLoggedIn,
10 | }: {
11 | dict: Record;
12 | setIsLoggedIn: Dispatch>;
13 | }) => {
14 | const [openAiKey, setOpenAiKey] = React.useState("");
15 | const [huggingfaceToken, setHuggingFaceToken] = React.useState("");
16 |
17 | async function login(key: string, token: string) {
18 | if (key.length === 0) {
19 | alert(dict["enter_openai_api_key"]);
20 | return;
21 | }
22 |
23 | if (token.length === 0) {
24 | alert(dict["enter_huggingface_access_token"]);
25 | return;
26 | }
27 |
28 | const data = await UserApi.login(key, token);
29 | if (data) {
30 | setIsLoggedIn(true);
31 | } else {
32 | alert("Login failed. Please check your API key.");
33 | setIsLoggedIn(false);
34 | }
35 | }
36 |
37 | return (
38 |
39 |
ChatDiffusion
40 |
47 | {dict["select_api_type_note"]}
48 |
49 |
{dict["openai_api_key"]}
50 |
51 |
61 |
71 |
3. {dict["copy_paste"]} API key:
72 |
73 |
74 | setOpenAiKey(ev.target.value)}
78 | >
79 |
80 |
86 | {dict["huggingface_access_token"]}
87 |
88 |
89 |
99 |
109 |
3. {dict["copy_paste"]} Access Token:
110 |
111 |
112 | setHuggingFaceToken(ev.target.value)}
116 | >
117 |
118 |
119 |
127 |
128 |
{graphDefinition};
115 | return (
116 | <>
117 |
118 | * hold space to pan & zoom
119 |
120 | {
123 | ref.current?.querySelector("svg")?.setPointerCapture(event.pointerId);
124 | }}
125 | >
126 |
127 |
128 |
129 |
130 |
131 | );
132 | }
133 |
--------------------------------------------------------------------------------
/src/components/DeepDanbooru.tsx:
--------------------------------------------------------------------------------
1 | import { DeepDanbooruTag } from "@/utils/type.util";
2 | import { ChangeEventHandler, useEffect, useState } from "react";
3 | type DeepDanbooruProps = {
4 | dict: Record;
5 | tags: DeepDanbooruTag[];
6 | handleTagSelectedChange?: (tags: string[]) => void;
7 | clearSelectedFlag: number;
8 | };
9 |
10 | export function DeepDanbooru(props: DeepDanbooruProps) {
11 | const [tagSelected, setTagSelected] = useState<{ [key: string]: boolean }>(
12 | {}
13 | );
14 | const [allSelected, setAllSelected] = useState(false);
15 | const handleTagSelectedChange: ChangeEventHandler = (e) => {
16 | tagSelected[e.target.name] = e.target.checked;
17 | setTagSelected(tagSelected);
18 | let selected = 0;
19 | for (const tag in tagSelected) if (tagSelected[tag]) selected++;
20 | console.log(
21 | selected,
22 | props.tags.filter((t) => t.label.indexOf("rating") == -1).length
23 | );
24 | if (
25 | selected ==
26 | props.tags.filter((t) => t.label.indexOf("rating") == -1).length
27 | ) {
28 | setAllSelected(true);
29 | } else {
30 | setAllSelected(false);
31 | }
32 | if (props.handleTagSelectedChange)
33 | props.handleTagSelectedChange(
34 | Object.keys(tagSelected).filter((t) => tagSelected[t])
35 | );
36 | };
37 | const handleTagSelectAllChange: ChangeEventHandler = (
38 | e
39 | ) => {
40 | for (const i in props.tags) {
41 | if (props.tags[i].label.indexOf("rating") != -1) continue;
42 | tagSelected[props.tags[i].label] = e.target.checked;
43 | }
44 | setTagSelected(tagSelected);
45 | setAllSelected(e.target.checked);
46 | if (props.handleTagSelectedChange)
47 | props.handleTagSelectedChange(
48 | Object.keys(tagSelected).filter((t) => tagSelected[t])
49 | );
50 | };
51 | useEffect(() => {
52 | if (props.clearSelectedFlag) {
53 | for (const i in props.tags) {
54 | if (props.tags[i].label.indexOf("rating") != -1) continue;
55 | tagSelected[props.tags[i].label] = false;
56 | }
57 | setTagSelected(tagSelected);
58 | setAllSelected(false);
59 | }
60 | }, [props.clearSelectedFlag]);
61 | return (
62 | <>
63 | {props &&
64 | props.tags.map((tag) => {
65 | if (tag.label.indexOf("rating") != -1) return;
66 | if (tagSelected[tag.label] == undefined)
67 | tagSelected[tag.label] = false;
68 | return (
69 |
77 |
99 |
106 |
118 |
76 | {children}
77 |
78 | );
79 | },
80 | del: (props) => {
81 | const { children } = props;
82 | return {children};
83 | },
84 | hr: (props) => {
85 | return ;
86 | },
87 | a: Link,
88 | img: Image,
89 | text: (props) => {
90 | const { children } = props;
91 | return {children};
92 | },
93 | ul: (props) => {
94 | const { ordered, children, depth } = props;
95 | const attrs = getCoreProps(props);
96 | let Element = UnorderedList;
97 | let styleType = "disc";
98 | if (ordered) {
99 | Element = OrderedList;
100 | styleType = "decimal";
101 | }
102 | if (depth === 1) styleType = "circle";
103 | return (
104 |
111 | {children}
112 |
113 | );
114 | },
115 | ol: (props) => {
116 | const { ordered, children, depth } = props;
117 | const attrs = getCoreProps(props);
118 | let Element = UnorderedList;
119 | let styleType = "disc";
120 | if (ordered) {
121 | Element = OrderedList;
122 | styleType = "decimal";
123 | }
124 | if (depth === 1) styleType = "circle";
125 | return (
126 |
133 | {children}
134 |
135 | );
136 | },
137 | li: (props) => {
138 | const { children, checked } = props;
139 | let checkbox = null;
140 | if (checked !== null && checked !== undefined) {
141 | checkbox = (
142 |
143 | {children}
144 |
145 | );
146 | }
147 | return (
148 |
152 | {checkbox || children}
153 |
154 | );
155 | },
156 | heading: (props) => {
157 | const { level, children } = props;
158 | const sizes = ["2xl", "xl", "lg", "md", "sm", "xs"];
159 | return (
160 |
166 | {children}
167 |
168 | );
169 | },
170 | pre: (props) => {
171 | const { children } = props;
172 | return {children};
173 | },
174 | table: Table,
175 | thead: Thead,
176 | tbody: Tbody,
177 | tr: (props) => {props.children}
,
178 | td: (props) => {props.children} | ,
179 | th: (props) => {props.children} | ,
180 | };
181 |
182 | function SimpleMarkdown({ content }: any) {
183 | function getHighlighter(match: RegExpExecArray, props: any, children: any) {
184 | const language = match[1];
185 | if (language == "mermaid") {
186 | return ;
187 | }
188 |
189 | return (
190 |
191 | {children}
192 |
193 | );
194 | }
195 |
196 | return (
197 | <>
198 |
234 | {code}
235 |
236 | );
237 | },
238 | }}
239 | >
240 | {content}
241 |
242 |
243 | );
244 | }
245 |
246 | export default SimpleMarkdown;
247 |
--------------------------------------------------------------------------------
/src/components/chatgpt/ChatRoom.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import NewChat from "@/assets/icons/new-chat.svg";
4 | import TrashcanIcon from "@/assets/icons/trashcan.svg";
5 | import LogoutIcon from "@/assets/icons/logout.svg";
6 | import Image from "next/image";
7 | import content from "@/assets/images/content.png";
8 | import send from "@/assets/icons/send.svg?url";
9 | import image_polaroid from "@/assets/icons/image-polaroid.svg?url";
10 | import React, {
11 | ChangeEventHandler,
12 | createRef,
13 | Dispatch,
14 | DragEventHandler,
15 | MouseEventHandler,
16 | SetStateAction,
17 | useEffect,
18 | useState,
19 | } from "react";
20 | import styled from "@emotion/styled";
21 | import type {
22 | DeepDanbooruTag,
23 | ResponseGetConversations,
24 | } from "@/utils/type.util";
25 | import { ResponseGetChats, ResponseSend } from "@/utils/type.util";
26 | import { BeatLoader } from "react-spinners";
27 | import { useDebouncedCallback } from "use-debounce";
28 | import { Input } from "@chakra-ui/react";
29 | import * as ChatAPI from "@/api/chat";
30 | import * as ConversationAPI from "@/api/conversation";
31 | import * as UserAPI from "@/api/user";
32 | import SimpleMarkdown from "@/components/markdown/SimpleMarkdown";
33 | import { isClientSideOpenAI } from "@/api/edge/user";
34 | import * as EdgeChatAPI from "@/api/edge/chat";
35 | import { getTags } from "@/utils/huggingface.space.util";
36 | import { DeepDanbooru } from "../DeepDanbooru";
37 |
38 | const ChatInput = styled("input")`
39 | background: #ffffff;
40 | border-radius: 8px;
41 | border: none;
42 | padding: 0.5rem 1rem;
43 | width: 100%;
44 | height: 48px;
45 | font-size: 1rem;
46 | font-weight: 500;
47 | color: #1e1e1e;
48 | outline: none;
49 | transition: all 0.2s ease-in-out;
50 |
51 | &:focus {
52 | box-shadow: 0 0 0 2px #1e1e1e;
53 | }
54 |
55 | &:focus::placeholder {
56 | color: #1e1e1e;
57 | }
58 | `;
59 | const ChatInputWrapper = styled("div")`
60 | position: absolute;
61 | bottom: 8px;
62 | height: 48px;
63 | background-color: #fff;
64 | border-radius: 8px;
65 | max-width: 90%;
66 | `;
67 | const ChatsWrapper = styled("div")`
68 | // good looking scrollbar
69 | &::-webkit-scrollbar {
70 | width: 8px;
71 | }
72 |
73 | &::-webkit-scrollbar-track {
74 | background: #f1f1f1;
75 | }
76 |
77 | &::-webkit-scrollbar-thumb {
78 | background: #888;
79 | }
80 |
81 | &::-webkit-scrollbar-thumb:hover {
82 | background: #555;
83 | }
84 | `;
85 | const ButtonWrapper = styled("div")`
86 | position: absolute;
87 | top: 0;
88 | bottom: 0;
89 | right: 8px;
90 | `;
91 | const ChatSendButton = styled("button")`
92 | width: 48px;
93 | height: 48px;
94 | background-image: url(${send});
95 | background-size: 24px;
96 | background-position: center;
97 | background-repeat: no-repeat;
98 | cursor: pointer;
99 | border: none;
100 | outline: none;
101 | `;
102 |
103 | const UploadFileButton = styled("button")`
104 | width: 48px;
105 | height: 48px;
106 | background-image: url(${image_polaroid});
107 | background-size: 24px;
108 | background-position: center;
109 | background-repeat: no-repeat;
110 | cursor: pointer;
111 | border: none;
112 | outline: none;
113 | `;
114 |
115 | export const ChatRoom = ({
116 | dict,
117 | setIsLoggedIn,
118 | initMessage,
119 | }: {
120 | dict: Record;
121 | setIsLoggedIn: Dispatch>;
122 | initMessage?: string;
123 | }) => {
124 | const chatsWrapper = React.useRef(null);
125 | const [disable, setDisable] = React.useState(false);
126 | const [chatHistory, setChatHistory] = React.useState([]);
127 | const [message, setMessage] = React.useState(initMessage ?? "");
128 |
129 | const [conversations, setConversations] = useState(
130 | []
131 | );
132 | const [currentConversation, setCurrentConversation] = useState(
133 | null
134 | );
135 | // editing conversation name
136 | const [editing, setEditing] = useState(null);
137 | const [editingName, setEditingName] = useState("");
138 | const [file, setFile] = useState(new Blob());
139 | const fileInputRef = createRef();
140 | const [clearTagSelected, setClearTagSelected] = useState(0);
141 |
142 | // get conversations
143 | useEffect(() => {
144 | (async () => {
145 | try {
146 | const data = (await ConversationAPI.getConversations()) ?? [];
147 | setConversations(data);
148 | } catch (error) {
149 | setConversations([]);
150 | alert("Error: " + JSON.stringify(error));
151 | }
152 | })();
153 | }, []);
154 |
155 | // scroll to bottom
156 | useEffect(() => {
157 | setTimeout(() => {
158 | if (chatsWrapper.current) {
159 | chatsWrapper.current.scrollTop = chatsWrapper.current.scrollHeight;
160 | }
161 | });
162 | }, [chatHistory]);
163 |
164 | const onEnterForSendMessage: React.KeyboardEventHandler = (
165 | event
166 | ) => {
167 | setClearTagSelected(clearTagSelected + 1);
168 | if (event.code === "Enter" || event.code === "NumpadEnter") {
169 | event.preventDefault();
170 |
171 | sendMessage();
172 | }
173 | };
174 |
175 | async function createConversation() {
176 | const data = await ConversationAPI.createConversation();
177 | if (!data) {
178 | return;
179 | }
180 |
181 | setConversations([data, ...conversations]);
182 | if (data.id) setCurrentConversation(data.id);
183 | return data;
184 | }
185 |
186 | async function changeConversationName(conversationId: number, name: string) {
187 | await ConversationAPI.changeConversationName(conversationId, name);
188 |
189 | setConversations((c) =>
190 | c.map((conversation) => {
191 | if (conversation.id === conversationId) {
192 | return {
193 | ...conversation,
194 | name,
195 | };
196 | }
197 | return conversation;
198 | })
199 | );
200 | }
201 |
202 | const handleConversation = useDebouncedCallback(
203 | async (
204 | conversationId: number | null,
205 | event: React.MouseEvent
206 | ) => {
207 | if (event.detail > 1) {
208 | // double click
209 | if (conversationId == null) {
210 | return;
211 | }
212 | setEditingName(
213 | conversations.find((c) => c.id === conversationId)?.name ?? ""
214 | );
215 | setEditing(conversationId);
216 | return;
217 | }
218 |
219 | if (conversationId == null) {
220 | setCurrentConversation(null);
221 | setChatHistory([]);
222 | return;
223 | }
224 | setDisable(true);
225 |
226 | try {
227 | setCurrentConversation(conversationId);
228 | const data = await ChatAPI.getChatsByConversationId(
229 | conversationId,
230 | true
231 | );
232 | if (!data) {
233 | return;
234 | }
235 | setChatHistory(data);
236 | } catch (e) {
237 | console.log("changeConversation: ", e);
238 | } finally {
239 | setDisable(false);
240 | }
241 | },
242 | 200
243 | );
244 |
245 | async function deleteConversation(conversationId: number) {
246 | if (conversationId == currentConversation) {
247 | setCurrentConversation(null);
248 | setChatHistory([]);
249 | }
250 | const data = await ConversationAPI.deleteConversation(conversationId);
251 | if (!data) {
252 | return;
253 | }
254 | setConversations(
255 | conversations.filter((conversation) => conversation.id !== conversationId)
256 | );
257 | }
258 |
259 | async function deleteAllConversations() {
260 | const data = await ConversationAPI.deleteAllConversations();
261 | if (!data) {
262 | return;
263 | }
264 | setConversations([]);
265 | setCurrentConversation(null);
266 | setChatHistory([]);
267 | }
268 | // FIXME anti-pattern, should use `useState`
269 | let codeMark = "";
270 | async function sendMessage(prompt?: string) {
271 | const _message = message.length ? message : prompt;
272 | console.log(_message);
273 | if (!_message || _message.length === 0) {
274 | alert("Please enter your message first.");
275 | return;
276 | }
277 |
278 | try {
279 | setDisable(true);
280 | let _currentConversation = currentConversation;
281 | if (currentConversation == null) {
282 | const created = await createConversation();
283 | _currentConversation = created?.id ?? null;
284 | setCurrentConversation(_currentConversation);
285 | if (!_currentConversation) return;
286 | }
287 |
288 | setMessage("");
289 | let updatedHistory = [
290 | ...chatHistory,
291 | {
292 | role: "user",
293 | content: _message,
294 | // TODO(CGQAQ): custom name of user
295 | // name: "User",
296 | },
297 | ] as ResponseSend;
298 |
299 | setChatHistory([...updatedHistory]);
300 |
301 | if (isClientSideOpenAI()) {
302 | const _messages = await EdgeChatAPI.sendMessage(
303 | _currentConversation as number,
304 | _message
305 | );
306 | setDisable(false);
307 | if (_messages && _messages.length) {
308 | setChatHistory([...updatedHistory, ..._messages]);
309 | } else {
310 | setDisable(false);
311 | setChatHistory([
312 | ...updatedHistory.slice(0, updatedHistory.length - 1),
313 | ]);
314 | }
315 | return;
316 | }
317 |
318 | const data = await ChatAPI.sendMsgWithStreamRes(
319 | _currentConversation as number,
320 | _message
321 | );
322 | if (!data) {
323 | setDisable(false);
324 | setChatHistory([...updatedHistory.slice(0, updatedHistory.length - 1)]);
325 | return;
326 | }
327 | const reader = data.getReader();
328 | const decoder = new TextDecoder();
329 | let isDone = false;
330 | while (!isDone) {
331 | const { value, done } = await reader.read();
332 | isDone = done;
333 | const chunkValue = decoder.decode(value);
334 | const lines = chunkValue
335 | .split("\n")
336 | .filter((line) => line.trim() !== "");
337 | for (const line of lines) {
338 | const message = line.replace(/^data: /, "");
339 | if (message === "[DONE]") {
340 | setDisable(false);
341 | } else {
342 | const parsed = JSON.parse(message).choices[0].delta;
343 | if (parsed && Object.keys(parsed).length > 0) {
344 | if (!!parsed.role) {
345 | parsed.content = "";
346 | updatedHistory = [...updatedHistory, parsed];
347 | } else if (!!parsed.content) {
348 | if (parsed.content === "```") {
349 | // code block start
350 | if (!codeMark) {
351 | codeMark = parsed.content;
352 | } else {
353 | // code block end remove it
354 | codeMark = "";
355 | }
356 | }
357 | updatedHistory[updatedHistory.length - 1].content +=
358 | parsed.content;
359 | }
360 | setChatHistory([...updatedHistory]);
361 | }
362 | }
363 | }
364 | }
365 | } catch (err) {
366 | console.log(err);
367 | setDisable(false);
368 | } finally {
369 | // setDisable(false);
370 | }
371 | }
372 |
373 | async function logout() {
374 | await UserAPI.logout();
375 | setIsLoggedIn(false);
376 | }
377 |
378 | const handleImageFileUpload: ChangeEventHandler = async (
379 | e
380 | ) => {
381 | if (!e.target.files?.length) return;
382 | if (!currentConversation) {
383 | handleImageUploadReset();
384 | return;
385 | }
386 | setDisable(true);
387 | const uploadedFile = e.target.files[0];
388 | setFile(uploadedFile);
389 | const fileContent = await new Promise((resolve, _) => {
390 | const reader = new FileReader();
391 | reader.onloadend = () => resolve(reader.result as string);
392 | reader.readAsDataURL(uploadedFile);
393 | });
394 | const chats = chatHistory;
395 | let id = 1;
396 | chats.forEach((c) => {
397 | if (c.id && c.id >= id) id = c.id + 1;
398 | });
399 | let chat = {
400 | id,
401 | conversation_id: currentConversation,
402 | role: "upload",
403 | content: fileContent as string,
404 | name: undefined,
405 | created_at: new Date().toISOString(),
406 | };
407 | chats.push(chat);
408 | setChatHistory(chats);
409 | ChatAPI.saveChat(currentConversation, chat);
410 | const tags = await getTags(fileContent as string);
411 | chat = {
412 | id: id + 1,
413 | conversation_id: currentConversation,
414 | role: "info",
415 | content: JSON.stringify(tags),
416 | name: undefined,
417 | created_at: new Date().toISOString(),
418 | };
419 | chats.push(chat);
420 | setChatHistory(chats);
421 | await ChatAPI.saveChat(currentConversation, chat);
422 | handleImageUploadReset();
423 | setDisable(false);
424 | };
425 |
426 | const handleDragOver: DragEventHandler = (e) => {
427 | e.preventDefault();
428 | e.stopPropagation();
429 | };
430 |
431 | const handleDrop: DragEventHandler = (e) => {
432 | e.preventDefault();
433 | e.stopPropagation();
434 | const droppedFile = e.dataTransfer.files[0];
435 | setFile(droppedFile);
436 | };
437 |
438 | const handleImageUploadClick: MouseEventHandler = (e) => {
439 | if (fileInputRef && fileInputRef.current) {
440 | fileInputRef.current.click();
441 | }
442 | };
443 |
444 | const handleImageUploadReset = () => {
445 | if (fileInputRef && fileInputRef.current) {
446 | fileInputRef.current.value = "";
447 | }
448 | setFile(new Blob());
449 | };
450 |
451 | const handleTagSelectedChange = (tags: string[]) => {
452 | setMessage(`${dict["tag_prompt"]}${tags.join(",")}`);
453 | };
454 |
455 | return (
456 |
457 | {/* left */}
458 |
459 |
463 |
464 | New chat
465 |
466 |
467 | {conversations.map((conversation) => (
468 |
{
476 | handleConversation(conversation.id!, event);
477 | }}
478 | >
479 | {editing === conversation.id ? (
480 |
{
484 | setEditingName(ev.currentTarget.value);
485 | }}
486 | onKeyDown={(ev) => {
487 | if (ev.key === "Enter" || ev.key === "NumpadEnter") {
488 | ev.preventDefault();
489 | changeConversationName(
490 | conversation.id!,
491 | ev.currentTarget.value
492 | ).finally(() => {
493 | setEditing(null);
494 | });
495 | } else if (ev.key === "Escape") {
496 | ev.preventDefault();
497 | setEditing(null);
498 | }
499 | }}
500 | onBlur={async (ev) => {
501 | await changeConversationName(
502 | conversation.id!,
503 | ev.currentTarget.value
504 | );
505 | setEditing(null);
506 | }}
507 | />
508 | ) : (
509 | <>
510 |
511 | {conversation.name}
512 |
513 | {/* delete button */}
514 |
{
517 | e.stopPropagation();
518 | if (
519 | confirm("Are you sure to delete this conversation?")
520 | ) {
521 | deleteConversation(conversation.id!);
522 | }
523 | }}
524 | >
525 |
526 |
527 |
528 | )}
529 |
530 | ))}
531 |
532 |
533 |
{
536 | e.stopPropagation();
537 | if (confirm("Are you sure to delete ALL conversations?")) {
538 | deleteAllConversations();
539 | }
540 | }}
541 | >
542 |
543 | Clear conversations
544 |
545 |
549 |
550 | Log out
551 |
552 |
553 |
554 |
555 | {/* right */}
556 |
557 | {/* {chatHistory.length === 0 && (
558 |
559 | )} */}
560 |
561 | {/* chats */}
562 |
566 | {chatHistory.map((chat, index) => {
567 | return (
568 |
569 | {chat && chat.role == "user" && (
570 |
571 | {/* chat bubble badge */}
572 |
573 |
574 |
575 |
576 | )}
577 | {chat && chat.role == "assistant" && (
578 |
585 | )}
586 | {chat &&
587 | chat.role == "image" &&
588 | chat.content.indexOf("data:image") != -1 && (
589 |
590 |
591 |
592 |
593 |
594 | )}
595 | {chat &&
596 | chat.role == "upload" &&
597 | chat.content.indexOf("data:image") != -1 ? (
598 |
599 |
600 |
601 |
602 |
603 | ) : (
604 | <>
605 | )}
606 | {chat &&
607 | chat.role == "info" &&
608 | chat.content.indexOf("confidence") != -1 ? (
609 |
619 | ) : (
620 | <>
621 | )}
622 |
626 |
627 |
628 | setMessage(ev.target.value)}
633 | onKeyDown={onEnterForSendMessage}
634 | className="pr-10 md:w-9/12 border-0 md:pr-0 focus:ring-0"
635 | />
636 | {disable ? (
637 |
642 | ) : (
643 |
644 |
649 | sendMessage()}
653 | />
654 |
662 |
663 | )}
664 |
665 |
666 |