[Feat] generate graphics in dialog boxes using modelui apis

.gitignore

@@ -3,4 +3,5 @@
 .swp
 logs/
 target
-*.iml
+*.iml
+__pycache__

kernel_connection_file.json

@@ -0,0 +1,12 @@
+{
+  "shell_port": 53624,
+  "iopub_port": 53628,
+  "stdin_port": 53625,
+  "control_port": 53626,
+  "hb_port": 53630,
+  "ip": "127.0.0.1",
+  "key": "ee78d8c3-211d1e84ff99b14a4dcb67dd",
+  "transport": "tcp",
+  "signature_scheme": "hmac-sha256",
+  "kernel_name": ""
+}

pom.xml

@@ -518,6 +518,7 @@
                         <exclude>.mvn/**</exclude>
                         <exclude>compiler/**</exclude>
                         <exclude>**/generated/**</exclude>
+                        <exclude>**/soliduimodelui.egg-info/**</exclude>
                     </excludes>
                 </configuration>
                 <executions>

solidui-entrance/src/main/resources/application.yaml

@@ -43,7 +43,7 @@ spring:
     basename: i18n/messages
   datasource:
     driver-class-name: com.mysql.jdbc.Driver
-    url: jdbc:mysql://localhost:3306/solidui?useSSL=false&useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai
+    url: jdbc:mysql://43.138.5.82:3306/solidui?useSSL=false&useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai
     username: root
     password: SolidUI@123
     hikari:

solidui-web/.eslintignore

@@ -22,3 +22,4 @@ public
 scripts
 docker
 coverage
+src/components/Chat/index.tsx

solidui-web/.eslintrc.js

@@ -85,6 +85,7 @@ module.exports = {
 				"no-nested-ternary": 1,
 				"no-prototype-builtins": 2,
 				"class-methods-use-this": 0,
+				"no-shadow": 0,	// need discussion
 
 				// typescript
 				"@typescript-eslint/no-empty-function": 0,

solidui-web/package.json

@@ -24,6 +24,7 @@
     "@types/react": "18.0.27",
     "@types/react-color": "3.0.4",
     "@types/react-dom": "18.0.10",
+    "@types/react-syntax-highlighter": "^15.5.7",
     "@types/react-window": "1.8.5",
     "@typescript-eslint/eslint-plugin": "^5.51.0",
     "@typescript-eslint/parser": "^5.51.0",
@@ -80,6 +81,7 @@
     "axios": "1.3.2",
     "classnames": "2.3.2",
     "echarts": "5.4.1",
+    "hastscript": "^6.0.0",
     "keycon": "1.4.0",
     "lodash-es": "4.17.21",
     "mitt": "3.0.0",
@@ -91,10 +93,12 @@
     "react-color": "2.18.1",
     "react-dom": "18.2.0",
     "react-infinite-viewer": "0.20.0",
+    "react-markdown": "^8.0.7",
     "react-moveable": "0.46.1",
     "react-router-dom": "6.8.1",
     "react-selecto": "1.22.0",
     "react-sticky-table": "5.1.11",
+    "react-syntax-highlighter": "^15.5.0",
     "react-textarea-autosize": "^8.4.1",
     "react-use": "17.4.0",
     "react-window": "1.8.9",

solidui-web/scripts/webpack.base.js

@@ -36,15 +36,19 @@ module.exports = {
     alias: {
       '@': path.join(__dirname, '../src')
     },
-    modules: [path.resolve(__dirname, '../node_modules')]
+		// [issue fix] react-markdown, react-syntax-highlighter common deps property-information with different version
+		// if set modules, webpack will search property-information in root node_modules, this may cause error
+		// ERROR in ./node_modules/hastscript/factory.js 4:16-57
+		// Module not found: Error: Can't resolve 'property-information/normalize' in '/..../SolidUI/solidui-web/node_modules/hastscript'
+    // modules: [path.resolve(__dirname, '../node_modules')]
   },
   module: {
     rules: [
       {
         test: /\.css$/,
         include: [
           path.resolve(__dirname, '../src'),
-          path.resolve(__dirname, '../node_modules/@szhsin/react-menu')
+					path.resolve(__dirname, '../node_modules/@szhsin/react-menu')
           // path.resolve(__dirname, '../node_modules/antd')
         ],
         use: [
@@ -56,10 +60,10 @@ module.exports = {
       {
         test: /\.less$/,
         include: [
-          path.resolve(__dirname, '../src'),
-          path.resolve(__dirname, '../node_modules/antd'),
-          path.resolve(__dirname, '../node_modules/rc-select')
-        ],
+					path.resolve(__dirname, '../src'),
+					path.resolve(__dirname, '../node_modules/antd'),
+					path.resolve(__dirname, '../node_modules/rc-select')
+				],
         use: [
           isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
           'css-loader',
@@ -165,9 +169,6 @@ module.exports = {
     new webpack.DefinePlugin({
       'process.env.BASE_ENV': JSON.stringify(process.env.BASE_ENV)
     }),
-    // new MonacoWebpackPlugin({
-    //   languages: []
-    // }),
   ],
   cache: {
     type: 'filesystem',

solidui-web/scripts/webpack.dev.js

@@ -33,6 +33,21 @@ module.exports = merge(baseConfig, {
       directory: path.join(__dirname, '../public'),
     },
 		proxy: {
+			'/solidui/models/generate': {
+				target: 'http://43.138.5.82:5110',
+				changeOrigin: true,
+				pathRewrite: {}
+			},
+			'/solidui/kernel/restart': {
+				target: 'http://43.138.5.82:5010',
+				changeOrigin: true,
+				pathRewrite: {}
+			},
+			'/solidui/models/api/api': {
+				target: 'http://43.138.5.82:5110',
+				changeOrigin: true,
+				pathRewrite: {}
+			},
 			'/solidui': {
 				target: 'http://localhost:12345',
 				changeOrigin: true,

solidui-web/src/apis/index.ts

@@ -15,7 +15,6 @@
  * limitations under the License.
  */
 
-// import { param } from "jquery";
 import ApiService from "./service";
 import {
 	SolidModelCreationDataType,
@@ -142,12 +141,23 @@ const datasource = {
 		),
 };
 
+const modelui = {
+	keys: <T>() => ApiService.get<T>("/solidui/models/keys"),
+	generate: <T>(params: { modelId: number; prompt: string }) =>
+		ApiService.post<T>(`/solidui/models/generate`, params),
+	generateByCommand: <T>(params: { command: string }) =>
+		ApiService.post<T>(`/solidui/models/api/api`, params),
+	result: <T>() => ApiService.get<T>(`/solidui/models/api/api`),
+	kernel_restart: () => ApiService.post(`/solidui/kernel/restart`),
+};
+
 const Apis = {
 	model,
 	images,
 	user,
 	project,
 	datasource,
+	modelui,
 };
 
 export default Apis;

solidui-web/src/components/Chat/chat.less

@@ -0,0 +1,89 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+div.message.system {
+	background: rgba(247,247,248);
+}
+
+div.avatar {
+	background: #0070cc;
+	padding: 5px;
+	color: #fff;
+	border-radius: 2px;
+}
+
+div.avatar svg {
+	display: block;
+	color: #fff;
+}
+
+.chat-messages {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	flex: 1;
+	overflow-y: auto;
+	overflow-x: hidden;
+}
+
+div.message.system div.avatar {
+	background: #74a89b;
+}
+
+.cell-output {
+	white-space: pre-wrap
+}
+
+div.message {
+	padding: 1rem;
+	border-bottom: rgba(0,0,0,.1);
+	flex-direction: row;
+	width: 100%;
+	display: flex;
+}
+
+div.message a:hover {
+	color: #000;
+	text-decoration: underline;
+}
+
+div.message-body {
+	padding-left: 1rem;
+	width: 100%;
+}
+
+.loader {
+	border: 5px solid #74a89b;
+	border-radius: 50%;
+	border-top: 5px solid #457e70;
+	width: 20px;
+	height: 20px;
+	-webkit-animation: spin 2s linear infinite;
+	animation: spin 2s linear infinite;
+	margin: 0 0.5rem;
+	margin-bottom: -5px;
+	display: inline-block;
+}
+
+/* Define spin animation */
+@keyframes spin {
+	0% { transform: rotate(0deg); }
+	100% { transform: rotate(360deg); }
+}
+