Home → General Discussion →

Using ChatGPT to Document NodeBox

• Edit

john

23 Mar, 2023 09:22 AM

In a recent discussion, kurtzwrk made an intriguing suggestion: use ChatGPT to write documentation for Nodebox. Edgeofinnerspace agreed, saying "this guy's got the right idea. ChatGPT could do that actually."

I also thought this was a pretty clever idea. I've only dabbled a bit with ChatGPT, but I've been quite impressed by its capabilities.

So I gave it a try. Here is a transcript of my first attempt:

John: what do you know about nodebox 3?

ChatGPT: NodeBox 3 is a free, open-source application for creating visualizations and generative designs using programming code. It was created by the experimental media lab LAb[au] and is built on top of the Python programming language and the Qt framework for the user interface. NodeBox 3 allows users to create designs by connecting a series of nodes that represent different operations, such as generating shapes, colors, and patterns, manipulating data, or applying filters. Users can write Python code to create their own custom nodes or modify the existing ones.
NodeBox 3 offers a wide range of features for creating complex designs, including support for 2D and 3D graphics, animations, typography, and data visualization. It also provides various export options for exporting designs in different formats such as PDF, SVG, PNG, and GIF.
NodeBox 3 has a thriving community of users and developers who share their creations, tutorials, and extensions on the NodeBox website and GitHub repository.

John: In nodebox 3, how do you find the width and height of a shape?

ChatGPT:. In NodeBox 3, you can find the width and height of a shape by accessing its bounding box. The bounding box is the smallest rectangle that completely encloses the shape. To get the bounding box of a shape, you can use the bounds() method. This method returns a tuple containing the x-coordinate, y-coordinate, width, and height of the bounding box. Here's an example:
python

Copy code
create a rectangle shape
rect(50, 50, 100, 50)

get the bounding box of the rectangle
x, y, w, h = bounds()

print the width and height
print("Width:", w)
print("Height:", h)
In this example, a rectangle shape is created with the rect() function. The bounds() method is then used to get the bounding box, and the width and height are printed to the console.
Note that the bounds() method returns the bounding box in the coordinate system of the current context, so make sure to set the context appropriately before calling the method if necessary.

John: In nodebox 3, which node would you use to find the width of a shape and what would you enter into that node?

ChatGPT:. In NodeBox 3, you can use the "Geometry" node to find the width of a shape. Here are the steps to find the width of a shape using the "Geometry" node: 1. Create a new composition and add the shape to the canvas.
2. In the node library, expand the "Shape" category and drag a "Geometry" node onto the canvas.
3. Connect the output of the shape node to the input of the geometry node.
4. Double-click on the "Geometry" node to open its properties panel.
5. In the properties panel, you should see various options for calculating the geometry of the input shape, such as "bounds", "centroid", "area", and "perimeter".
6. Select the "bounds" option to get the width and height of the shape's bounding box.
7. To get the width specifically, connect the "width" output of the "Geometry" node to a "Number" or "Text" node, which will display the width value.
So in short, you would use the "Geometry" node and select the "bounds" option in its properties panel to find the width of a shape, and then connect the "width" output of the "Geometry" node to a node that displays the value.

John: There is no geometry node in Nodebox 3

ChatGPT: I apologize for the confusion. You are correct that there is no "Geometry" node in NodeBox 3. To find the width of a shape in NodeBox 3, you can use the bounds() method as described in my previous answer. Here is an example code that demonstrates how to do this:
scss

Copy code
create a rectangle shape
rect(50, 50, 100, 50)

get the bounding box of the rectangle
x, y, w, h = bounds()

display the width of the rectangle
text

John: How would I find the width of a shape in Nodebox 3 without writing any Python code?

ChatGPT: In NodeBox 3, you can find the width of a shape without writing any Python code by using a combination of nodes. Here's how: 1. Create a new composition and add the shape to the canvas.
2. In the node library, expand the "Shape" category and drag a "Shape Properties" node onto the canvas.
3. Connect the output of the shape node to the input of the "Shape Properties" node.
4. Double-click on the "Shape Properties" node to open its properties panel.
5. In the properties panel, you should see various options for getting information about the input shape, such as "Width", "Height", "Area", and "Perimeter".
6. Select the "Width" option to get the width of the shape.
7. To display the width value, connect the "Width" output of the "Shape Properties" node to a node that displays the value, such as a "Text" node.
So in short, you would use the "Shape Properties" node and select the "Width" option in its properties panel to find the width of a shape, and then connect the "Width" output of the "Shape Properties" node to a node that displays the value.

---

I think you can see the problem. ChatGPT always aims to please. If it doesn't know the answer to a question, it makes something up.

A more experienced prompt engineer might be able to get better answers out of ChatGPT, but you'd have to take everything it said with a huge grain of salt. It might be more work to prompt, repompt, read, validate, and edit its output than it would be to write it yourself.

But that's the current ChatGPT. I think the idea might eventually have some merit. The deeper problem is that there is much more to creating an effective documentation site than simply saying "write some documentation". ChatGPT might someday (maybe someday soon!) be able to do a lot of the heavy lifting, both the writing and the coding, but it would need an experienced editor, UX designer, information architect, prompt engineer, Nodebox expert reviewer, testers, and a LOT of guidance.

But what do you guys think? What other ways might we harness the power of AI to make Nodebox easier to use?

1. Support Staff 1 Posted by Frederik De Ble... on 23 Mar, 2023 10:36 AM

   

   Hi John,

   It's interesting that you mention that. I'm currently working on a new iteration of NodeBox that will include AI as well. The way we do that is to let the system generate NodeBox networks, and integrate them into the system.

   This actually works quite well, but needs some prompt engineering. The more info the better, so we basically give the system a quick intro into NodeBox: how it can connect nodes together, how list cycling works, and what nodes are available. Especially with GPT-4, it follows the prompt quite strictly and creates new networks.

   More info will follow in the coming weeks as I'm releasing a prototype.

   • Edit

2. Support Staff 2 Posted by john on 23 Mar, 2023 11:15 AM

   

   Wow. Can't wait.

   • Edit

3. Support Staff 3 Posted by Frederik De Ble... on 23 Mar, 2023 04:35 PM

   

   To give a bit more context:

   Because NodeBox is visual, this makes it harder for ChatGPT to understand the logic of the system (we could feed it XML files but it's hard to see the relationship). Instead I'm developing the NodeBox Language, a language-format of NodeBox that is isomorphic to the graphical network (they can be used interchangeably).

   For example, the NodeBox Language description for a checkerboard network might look like this (note that this doesn't do anything different from what NodeBox already does, it's just a different way of describing the network):

   # A checkerboard is 8 by 8, so grid1 will return a list of 64 positions.
   grid1 = core.grid(position=[0, 0], rows=8, columns=8, width=400, height=400)
   # We can ignore default arguments, like alpha
   black = core.color(r=0, g=0, b=0)
   white = core.color(r=1, g=1, b=1)
   # Combine white/black into a list with 2 elements.
   # The grid starts at the top-left with black.
   colors = core.merge(input1=black, input2=white)
   # Note the `@` sign to indicate we're cycling the colors, because the grid position list and the colors don't have the same size.
   rect1 = core.rect(position=grid1, width=50, height=50, fill=@colors)

   

   We then give a few examples of these and most of the time, that's enough for GPT-4 to figure out how to write the code (as you can see in the screenshot), which can be turned into a network. Pretty cool stuff.

   • Screenshot_2023-03-23_at_17.29.34.png 290 KB
   • Edit

4. Support Staff 4 Posted by john on 23 Mar, 2023 09:43 PM

   

   Cool stuff indeed!

   This makes perfect sense to me. I can immediately see possibilities extending to the horizon. Even more, this could fundamentally change the way people use Nodebox, how they learn, how they share - which could in turn change who uses Nodebox.

   I hope I will be able to leverage all the Nodebox 3 networks I've created over the years: import chatGPT-generated code as subnetworks to add to an established project, export my own projects for chatGPT to digest, describe, translate, or improve, work in a multi-modal way by alternatively drawing and chatting, and who knows what else.

   It seems to me you will need a name for this new language. NodeText?

   I will try to kerb my enthusiasm and wait patiently.

   John

   • Edit

5. 5 Posted by Jussi Jokinen on 05 Apr, 2023 02:19 PM

   

   Wow indeed! (mouth open) Can't wait…

   • Edit

6. 6 Posted by edgeofinnerspac... on 13 Apr, 2023 10:55 PM

   

   John, is that because you do or dont find larry david funny?

   • Edit

7. Support Staff 7 Posted by john on 14 Apr, 2023 02:59 AM

   

   Yes, I do find Larry David funny. But even without that reference, I would still be struggling to kerb my enthusiasm.

   Is the prototype ready yet?

   Is it ready now?

   Is it ready now?

   How about now?

   • Edit

8. 8 Posted by edgeofinnerspac... on 14 Apr, 2023 06:43 PM

   

   i tried using the github repo of nodebox to prompt gpt-4 to give me usable documentation and everything i tried just gave me references or links back to the existing documentation even with scenarios 'ignoring' existing documentation or suggestions like filling in the holes in documentation. but this is why i dont like microsoft. and currently thats the only free version of gpt-4. by the way, was my new post sent to spam again?

   • Edit

9. Support Staff 9 Posted by john on 14 Apr, 2023 07:13 PM

   

   Thanks for trying GPT-4 on the Nodebox GitHub. It was a brave experiment, but I'm not surprised it didn't work.

   If you could somehow point it to the thousands of message threads in the forum, and then ask it for documentation on specific topics (like subnetworks), that might be more interesting. But I would still be surprised if produced good results.

   I just checked the forum spam folder and did not see anything from you in there. Did you submit a different post that failed to appear in the forum?

   • Edit

10. 10 Posted by edgeofinnerspac... on 15 Apr, 2023 01:23 AM

    

    umm, should be under 'show your work' its titled "UPDATE: still bad at social media"

    i'll add a comment because i have another question anyway.

    • Edit