A-12 commenting code

app/api/gpt4.py

@@ -26,7 +26,7 @@ async def echo(websocket, path):
     except websockets.ConnectionClosedError:
         print("\nWS connection closed unexpectedly.")
         print("\nRestarting middleware...")
-
+        asyncio.create_task(main())
     except Exception as e:
         print(f"\nUnexpected error: {e}")
 
@@ -77,12 +77,24 @@ def gpt_chat_stat(prompt):
     return message
 
 
+server = None
+
+
 async def main():
     print("Starting GPT WS Service...")
-    gpt_chat_stat("Write this message back: GPT Connection works.")
-    async with websockets.serve(echo, "localhost", 8765, max_size=10 * 1024 * 1024):
+    global server
+    try:
+
+        gpt_chat_stat("Write this message back: GPT Connection works.")
+        server = await websockets.serve(echo, "localhost", 8765, max_size=10 * 1024 * 1024)
         print("WS Service is active at: ws://localhost:8765")
         await asyncio.Future()
+    except OSError:
+
+        if server:
+            server.close()
+            await server.wait_closed()
+            await main()
 
 
 asyncio.run(main())

app/src/const.ts

@@ -1,5 +1,8 @@
 const _pad = 0;
 const _padh = 0;
+/**
+ * common constants
+ */
 const CONST = {
     rectSize: {
         y: 0,
@@ -17,6 +20,9 @@ const CONST = {
         clientWidth: window.innerWidth,
         clientHeight: window.innerHeight
     },
+    /**
+     * min and max are the outer values of accepted zoom level, speed is the zooming speed: (speed)**zoomLevel
+     */
     zoom: {
         min: 0.4,
         max: 5.5,
@@ -28,6 +34,9 @@ const CONST = {
         padLeft: 5
     },
     dndBypass: false,
+    /**
+     * default chatGPT connection. websocket URL.
+     */
     chatGPTWS: "ws://localhost:8765/"
 }
 

app/src/ui/Header.tsx

@@ -61,7 +61,10 @@ export default function Header({toggleBg, graph}: {
             wsc.onmessage = (msg) => {
                 if (!msg.data) return;
                 allData += msg.data;
-                setGptContent(allData);
+                setGptContent(allData.replace("EOF", "\nEnd of GPT-4 message."));
+                if (allData.includes("EOF")) {
+                    setUseGPT(GPTStatus.ERROR);
+                }
                 try {
                     const adJSON = JSON.parse(allData.replace(/EOF/g, ""))
                     SerialiserInst.fromJSON({
@@ -100,8 +103,6 @@ export default function Header({toggleBg, graph}: {
             window.alert("Error!\n" + e);
             setUseGPT(GPTStatus.ERROR);
         }
-
-
     }
 
     return <span id={"header"}>
@@ -116,10 +117,14 @@ export default function Header({toggleBg, graph}: {
                 Auto Layout
             </Button>
             {" "}
-            <Button onClick={toggleBg}>
+
+        </>}
+
+        <Button onClick={toggleBg}>
                 Toggle Theme
-            </Button>
+        </Button>
 
+        {graph && <>
             {" "}
             <Button onClick={initGPT} disabled={useGPT === GPTStatus.WORKING}>
                 Use GPT
@@ -142,7 +147,5 @@ export default function Header({toggleBg, graph}: {
                 </code>
             </div>
         </>}
-
     </span>
-
 };

app/src/ui/NodeBlueprints.tsx

@@ -19,19 +19,17 @@ const nodeGroupNames = new Map([
 export function NodeGroups({items}: NodeBlueprintsProps) {
     return <>
         <div id={"nodeGroups"} className={"majorElement"}>
-            <h3 className={"center"}>Node Groups</h3>
+            <h3>Node Groups</h3>
             <p className={"just"}>
                 Switch the list of available nodes from presets<br/>
-                Switching node groups will remove all currently placed nodes in the graph.<br/>
-                Feel free to create and delete nodes in the custom nodes section.
-
+                Switching node groups will remove all currently placed nodes in the graph.
             </p>
             {[...NodeGroup.everyNodeGroupDefinition()]
                 .map(el => <NodeGroupItem name={el[0]}/>)
             }
-            <Button className={"blue"}>
-                Custom Nodes
-            </Button>
+            {/*<Button className={"blue"}>*/}
+            {/*    Custom Nodes*/}
+            {/*</Button>*/}
 
         </div>
     </>
@@ -60,7 +58,7 @@ export default function NodeBlueprints({items}: NodeBlueprintsProps) {
     return <>
         <div id={"nodeBlueprints"} className={"majorElement"}>
             <h3 className={"center"}>Node Blueprints</h3>
-            <Button className={"blue newBtn"}>New Node</Button>
+            {/*<Button className={"blue newBtn"}>New Node</Button>*/}
             {[...items.values()].map((item: jsobj) => {
                 return NodeBlueprintItem(item);
             })}
@@ -76,11 +74,11 @@ function NodeBlueprintItem(item: jsobj) {
 
         <BtnGroup>
             <Button disabled className={"btn-100"}>{item.name}</Button>
-            <Button
-                onClick={() => getState().setBlueprintedNode(item.name)}
-            >Select</Button>
-            <Button>...</Button>
-            <Button>×</Button>
+            <Button onClick={() => getState().setBlueprintedNode(item.name)}>
+                View
+            </Button>
+            {/*<Button>...</Button>*/}
+            {/*<Button>×</Button>*/}
             {/*<Button*/}
             {/*    onClick={() => getState().setActiveNode(node.ID)}*/}
             {/*>focus</Button>*/}

app/src/ui/Taskbar.tsx

@@ -32,24 +32,18 @@ export default function Taskbar({items}: { items: Map<string, jsobj> }) {
     if (CONST.dndBypass) return <></>
     return <>
         <div id={"taskbar"}>
-            <DndContext onDragEnd={dragend}>
-
+            <DndContext>
                 <WrapToTaskbarItem name="nodes" cid="nodes" element={<AvailableNodes items={items}/>}/>
                 {/*<WrapToTaskbarItem name="active" cid="activeNodes" element={<ActiveNodes/>}/>*/}
                 <WrapToTaskbarItem name="props" cid="properties" element={<PropertyViewer/>}/>
                 <WrapToTaskbarItem name="io" cid="io" element={<IO/>}/>
-
                 <Droppable/>
                 {/*<Draggable/>*/}
             </DndContext>
         </div>
     </>
 }
 
-const dragend = (some: any) => {
-    console.log(some, some.active.id);
-}
-
 
 function Droppable() {
     const {setNodeRef} = useDroppable({

app/src/ui/styles/App.css

@@ -62,7 +62,7 @@
     left: 350px;
     top: 120px;
     height: 400px;
-
+    color: #eee;
 }
 
 #activeNodes {
@@ -521,6 +521,14 @@ body:has(._white) {
     border: none;
     margin: 0 auto;
     width: 100%;
+    height: calc(100% - 80px);
+}
+
+._white .blueprintEditor textarea {
+    color: #232323;
+}
+._white {
+    color:#484848;
 }
 
 #ctxMenu button.half {

app/src/util/Geom.ts

@@ -7,6 +7,10 @@ export enum Button {
     LEAVE = "LEAVE"
 }
 
+/**
+ * Represents a point in 2D space with x and y coordinates.
+ * @class Point
+ */
 export class Point {
     public x: number;
     public y: number;
@@ -27,12 +31,25 @@ export class Point {
         return new Point(obj?.x || 0, obj?.y || 0);
     }
 
+    /**
+     * Completely typesafe fromString version.
+     * Creates a new instance of Point from x and y coordinates specified as strings.
+     * @static
+     * @param {string | undefined | null} x - The x-coordinate of the point as a string.
+     * @param {string | undefined | null} y - The y-coordinate of the point as a string.
+     * @returns {Point} - A new instance of Point.
+     */
     static fromString(x: string | undefined | null, y: string | undefined | null) {
         const xn = isNaN(Number(x)) ? 0 : Number(x);
         const yn = isNaN(Number(y)) ? 0 : Number(y);
         return new Point(xn, yn)
     }
 
+    /**
+     * Returns a new Point representing the origin, with x and y coordinates set to 0.
+     * @static
+     * @returns {Point} - A new instance of Point representing the origin.
+     */
     static get Origin(): Point {
         return new Point(0, 0);
     }
@@ -48,13 +65,13 @@ export class Point {
     equals(p2: Point): boolean {
         return (p2.x === this.x && p2.y === this.y)
     }
-
 }
 
+/**
+ * A class containing static methods related to 2D geometry operations.
+ * @class Geom
+ */
 export class Geom {
-    // static Distance(a: Point, b: Point) {
-    //     // todo
-    // }
 
     static Difference(a: Point, b: Point): Point {
         return new Point(
@@ -63,13 +80,24 @@ export class Geom {
         )
     }
 
+    /**
+     * Inverts the given point by negating its x and y coordinates and returns a new Point object.
+     * @static
+     */
     static Inv(a: Point) {
         return new Point(
             -a.x,
             -a.y
         )
     }
 
+    /**
+     * Returns a string representing a cubic Bezier curve in SVG path format, starting at the fromPoint and ending at the toPoint.
+     * @static
+     * @param {Point} fromPoint The starting point of the curve.
+     * @param {Point} toPoint The ending point of the curve.
+     * @returns {string} A string in SVG path format representing a cubic Bezier curve.
+     */
     static bezierSvgD(fromPoint: Point, toPoint: Point): string {
         const sx = fromPoint.x;
         const ex = toPoint.x;
@@ -80,6 +108,10 @@ export class Geom {
         return `M${sx},${sy} C${mx},${sy} ${mx},${ey} ${ex},${ey}`
     }
 
+    /**
+     * Returns a string representing the given viewBox object in SVG viewBox format.
+     * @param viewBox
+     */
     static viewBox(viewBox: jsobj) {
         return `${viewBox.x} ${viewBox.y} ${viewBox.w} ${viewBox.h}`
     }

app/src/util/util.ts

@@ -1,17 +1,23 @@
+/**
+ * Generic container for JavaScript object. Its used sparingly, when the complete type is not defined or known.
+ */
 type jsobj = {
     [key: string]: any
 }
 
-interface Ijsobj {
-    [key: string]: any
-}
-
 export type {
-    jsobj,
-    Ijsobj
+    jsobj
 }
 
-
+/**
+ * Creates a downloadable file from the given content and saves it to the user's device or opens it in a new tab,
+ * depending on the shouldDownload parameter.
+ * @param {any} content The content of the file to be created.
+ * @param {string} type The MIME type of the file to be created, in Graphene its SVG or JSON
+ * @param {string} fileName The name to be given to the file to be created.
+ * @param {boolean} [shouldDownload=true] A boolean indicating whether the file should be downloaded or opened in a new tab.
+ * @returns {void}
+ */
 export const createFile = (
     content: any,
     type: string,
@@ -30,8 +36,14 @@ export const createFile = (
 
     aElement.setAttribute('href', objectUrl);
     aElement.click();
-    aElement.remove()
+    aElement.remove();
 }
+/**
+ * Wraps the given function in a closure that prevents the click event's default behavior and stops the event
+ * from propagating before invoking the function.
+ * @param {Function} fn The function to be wrapped.
+ * @returns {Function} A closure that prevents the event's default behavior and stops the event from propagating before invoking the wrapped function.
+ */
 export const preventBubble = (fn: Function) => (evt: any) => {
     evt.preventDefault();
     evt.stopPropagation();