Skip to content

Commit

Permalink
final commit
Browse files Browse the repository at this point in the history
  • Loading branch information
romansharapov19 committed Nov 12, 2023
1 parent 6486ee5 commit ef2f721
Show file tree
Hide file tree
Showing 8 changed files with 150 additions and 104 deletions.
75 changes: 42 additions & 33 deletions src/renderer/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,15 @@ import ReactFlow, {
ReactFlowProvider,
} from 'reactflow';
import { shallow } from 'zustand/shallow';
import { useCallback, useRef, useState } from 'react';
import {
FiPlayCircle,
FiKey,
FiMessageSquare,
FiImage,
FiMusic,
FiSettings,
} from 'react-icons/fi';
import useStore from './store';

import 'reactflow/dist/style.css';
Expand All @@ -19,18 +28,10 @@ import CodeBlock from './nodes/Codeblock';
import Start from './nodes/Start';
import Explanation from './nodes/Explanation';
import CodeTypeSelector from './nodes/CodeTypeSelector';
import { useCallback, useRef, useState } from 'react';
import OpenAITranscription from './nodes/OpenAITranscription';

import {
FiPlayCircle,
FiKey,
FiMessageSquare,
FiImage,
FiMusic,
FiSettings,
} from 'react-icons/fi';
import Display from './nodes/Display';
import Tutorial from './nodes/Tutorial';

const nodeTypes = {
openAI: OpenAI,
Expand All @@ -42,7 +43,8 @@ const nodeTypes = {
codeBlock: CodeBlock,
explanation: Explanation,
codeLanguage: CodeTypeSelector,
display: Display
display: Display,
tutorial: Tutorial,
};

const selector = (store) => ({
Expand All @@ -60,7 +62,7 @@ const selector = (store) => ({
addNode: store.addNode,
updateData: store.updateData,
updateLanguage: store.updateLanguage,
updateCompletionType: store.updateCompletionType
updateCompletionType: store.updateCompletionType,
});

export default function App() {
Expand All @@ -82,7 +84,7 @@ export default function App() {
}

const position = reactFlowInstance.screenToFlowPosition({
x: event.clientX,
x: event.clientX - 210,
y: event.clientY,
});

Expand All @@ -94,11 +96,11 @@ export default function App() {
const isValidConnection = (connection) => {
const sourceNode = store.nodes.find((val) => val.id === connection.source);

const targetNode = store.nodes.find((val) => val.id === connection.target);
const targetNode = store.nodes.find((val) => val.id === connection.target);

if (sourceNode.type === 'start' && targetNode.type === 'openAI') {
return true;
}
if (sourceNode.type === 'start' && targetNode.type === 'openAI') {
return true;
}

if (
sourceNode.type === 'openAI' &&
Expand All @@ -118,8 +120,8 @@ export default function App() {
return true;
}

if (sourceNode.type === "codeLanguage" && targetNode.type === "end") {
return true
if (sourceNode.type === 'codeLanguage' && targetNode.type === 'end') {
return true;
}

// if (sourceNode.type === "codeLanguage" && targetNode.type === "display") {
Expand Down Expand Up @@ -167,24 +169,30 @@ export default function App() {

if (allPaths.length <= 0) return;

for (const nodes of allPaths) {
for (let i = 0; i < nodes.length; i++) {
const node = store.getNode(nodes[i]);
myJson[node.type] = node.data;
}
}
for (const nodes of allPaths) {

Check failure on line 172 in src/renderer/App.tsx

View workflow job for this annotation

GitHub Actions / test (ubuntu-latest) 

iterators/generators require regenerator-runtime, which is too heavyweight for this guide to allow them. Separately, loops should be avoided in favor of array iterations
for (let i = 0; i < nodes.length; i++) {

Check failure on line 173 in src/renderer/App.tsx

View workflow job for this annotation

GitHub Actions / test (ubuntu-latest) 

Unary operator '++' used
const node = store.getNode(nodes[i]);
myJson[node.type] = node.data;
}
}

let myCode = "";
let myCode = '';

for (const x in myJson) {
if (x === "start" || x === "end" || x === "codeLanguage" || x === "display") continue;
for (const x in myJson) {

Check failure on line 181 in src/renderer/App.tsx

View workflow job for this annotation

GitHub Actions / test (ubuntu-latest) 

for..in loops iterate over the entire prototype chain, which is virtually never what you want. Use Object.{keys,values,entries}, and iterate over the resulting array
if (
x === 'start' ||
x === 'end' ||
x === 'codeLanguage' ||
x === 'display'
)
continue;

Check failure on line 188 in src/renderer/App.tsx

View workflow job for this annotation

GitHub Actions / test (ubuntu-latest) 

Unexpected use of continue statement

store.updateCompletionType(x)
store.updateCompletionType(x);

const { fn, ...args } = myJson[x];
if (fn) {
myCode += fn({ ...args, language: store.language });
myCode += `
const { fn, ...args } = myJson[x];
if (fn) {
myCode += fn({ ...args, language: store.language });
myCode += `
`;
}
}
Expand Down Expand Up @@ -259,7 +267,8 @@ export default function App() {
onInit={setReactFlowInstance}
onDrop={onDrop}
onDragOver={onDragOver}
fitView>
fitView
>
<Controls />
<MiniMap />
<Background variant="dots" gap={12} size={1} />
Expand Down
42 changes: 20 additions & 22 deletions src/renderer/components/Handler/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,35 +2,33 @@ import React, { useMemo } from 'react';
import { getConnectedEdges, Handle, useNodeId, useStore } from 'reactflow';

const selector = (s) => ({
nodeInternals: s.nodeInternals,
edges: s.edges,
nodeInternals: s.nodeInternals,
edges: s.edges,
});

const CustomHandle = (props) => {
const { nodeInternals, edges } = useStore(selector);
const nodeId = useNodeId();
function CustomHandle(props) {
const { nodeInternals, edges } = useStore(selector);
const nodeId = useNodeId();

const isHandleConnectable = useMemo(() => {
if (typeof props.isConnectable === 'function') {
const node = nodeInternals.get(nodeId);
const connectedEdges = getConnectedEdges([node], edges);
const isHandleConnectable = useMemo(() => {
if (typeof props.isConnectable === 'function') {
const node = nodeInternals.get(nodeId);
const connectedEdges = getConnectedEdges([node], edges);

return props.isConnectable({ node, connectedEdges });
}
return props.isConnectable({ node, connectedEdges });
}

if (typeof props.isConnectable === 'number') {
const node = nodeInternals.get(nodeId);
const connectedEdges = getConnectedEdges([node], edges);
if (typeof props.isConnectable === 'number') {
const node = nodeInternals.get(nodeId);
const connectedEdges = getConnectedEdges([node], edges);

return connectedEdges.length < props.isConnectable;
}
return connectedEdges.length < props.isConnectable;
}

return props.isConnectable;
}, [nodeInternals, edges, nodeId, props.isConnectable]);
return props.isConnectable;
}, [nodeInternals, edges, nodeId, props.isConnectable]);

return (
<Handle {...props} isConnectable={isHandleConnectable}></Handle>
);
};
return <Handle {...props} isConnectable={isHandleConnectable} />;
}

export default CustomHandle;
2 changes: 1 addition & 1 deletion src/renderer/index.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
http-equiv="Content-Security-Policy"
content="script-src 'self' 'unsafe-inline'"
/>
<title>Hello Electron React!</title>
<title>VisualChain </title>
</head>
<body>
<div id="root"></div>
Expand Down
43 changes: 25 additions & 18 deletions src/renderer/nodes/Display.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,30 @@
import { shallow } from "zustand/shallow";
import useStore from "../store";
import { shallow } from 'zustand/shallow';
import useStore from '../store';

const selector = (store) => ({
outputString: store.outputString,
completionType: store.completionType
outputString: store.outputString,
completionType: store.completionType,
});
export default function Display() {
const store = useStore(selector, shallow);

const store = useStore(selector, shallow);


return (
<div className="flex flex-col rounded-md bg-white shadow-xl border w-[600px] z-[999999]">
<p className={"rounded-t-md px-2 py-1 bg-purple-500 text-white text-sm"}>
Output
</p>
<label className="flex px-2 py-1 w-full items-center justify-center">
{store.completionType !== "openAIImages" ? <p className=" text-lg font-bold">{store.outputString}</p> : <img src={store.outputString} alt="output" width="1024" height="1024"></img> }
</label>
</div>
);
}
return (
<div className="flex flex-col rounded-md bg-white shadow-xl border w-[600px] z-[100]">
<p className="rounded-t-md px-2 py-1 bg-purple-500 text-white text-sm">
Output
</p>
<label className="flex px-2 py-1 w-full items-center justify-center">
{store.completionType !== 'openAIImages' ? (
<p className=" text-lg font-bold">{store.outputString}</p>
) : (
<img
src={store.outputString}
alt="output"
width="1024"
height="1024"
/>
)}
</label>
</div>
);
}
27 changes: 16 additions & 11 deletions src/renderer/nodes/End.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,19 @@
import React from "react";
import { Handle } from "reactflow";
import CustomHandle from "../components/Handler";
import React from 'react';
import CustomHandle from '../components/Handler';

export default function End() {
return (
<div className="flex rounded-md bg-white shadow-xl border w-20">
<label className="flex px-2 py-1 w-full items-center justify-center">
<p className="text-lg font-bold">🛑</p>
</label>
<CustomHandle className="w-2 h-2" type="target" position="top" isConnectable={1} />
</div>
);
return (
<div className="flex rounded-md bg-white shadow-xl b border-2 border-red-400">
<label className="flex gap-4 m-2 px-2 py-1 w-full items-center justify-center">
<p className="text-lg font-bold">🛑</p>
<p className="text-lg font-bold">End</p>
</label>
<CustomHandle
className="w-2 h-2"
type="target"
position="top"
isConnectable={1}
/>
</div>
);
}
27 changes: 16 additions & 11 deletions src/renderer/nodes/Start.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,19 @@
import React from "react";
import { Handle } from "reactflow";
import CustomHandle from "../components/Handler";
import React from 'react';
import CustomHandle from '../components/Handler';

export default function Start() {
return (
<div className="flex rounded-md bg-white shadow-xl border w-20">
<label className="flex px-2 py-1 w-full items-center justify-center">
<p className=" text-lg font-bold">🟢</p>
</label>
<CustomHandle className="w-2 h-2" type="source" position="bottom" isConnectable={1} />
</div>
);
return (
<div className="flex rounded-md bg-white shadow-xl border-2 border-green-400">
<label className="flex gap-4 m-2 px-2 py-1 w-full items-center justify-center">
<p className="text-lg font-bold">🟢</p>
<p className="text-lg font-bold">Start</p>
</label>
<CustomHandle
className="w-2 h-2"
type="source"
position="bottom"
isConnectable={1}
/>
</div>
);
}
15 changes: 15 additions & 0 deletions src/renderer/nodes/Tutorial.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
export default function Tutorial() {
return (
<div className="rounded-md bg-white shadow-xl border-2 p-2 w-96">
<p>
Here is <strong>VisualChain</strong>, to start please drag the AI
components from the sidebar.
</p>
<p>
Then you want and connect the nodes and if all the connections are
correct just hit the <strong>Run</strong> button and you will see magic
happen.
</p>
</div>
);
}
23 changes: 15 additions & 8 deletions src/renderer/store/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,13 @@ const useStore = create((set, get) => {
return {
nodes: [
{ id: nanoid(), type: 'start', position: { x: 50, y: 50 } },
{
id: nanoid(),
type: 'tutorial',
draggable: false,
selectable: false,
position: { x: 200, y: 50 },
},
{ id: nanoid(), type: 'end', position: { x: 50, y: 700 } },
],
edges: [],
Expand Down Expand Up @@ -112,14 +119,14 @@ const useStore = create((set, get) => {
set({ nodes: [...get().nodes, { id, type, data, position }] });
break;
}
case 'start': {
set({ nodes: [...get().nodes, { id, type, position }] });
break;
}
case 'end': {
set({ nodes: [...get().nodes, { id, type, position }] });
break;
}
// case 'start': {
// set({ nodes: [...get().nodes, { id, type, position }] });
// break;
// }
// case 'end': {
// set({ nodes: [...get().nodes, { id, type, position }] });
// break;
// }
case 'codeBlock': {
const data = { code: get().data };
const position = { x: 200, y: 300 };
Expand Down

0 comments on commit ef2f721

Please sign in to comment.