Tips: LiveCode and AI Chatbots

Hutchboy · Post by **Hutchboy** » Tue Aug 08, 2023 2:21 pm

TIP 1: Generating Mermaid Flowcharts from LiveCode Scripts

In the currently free Claude2 AI chatbot (Claude.ai) you can upload or paste in LiveCode scripts and ask for a flowchart. I tried this with the final version of Galactic Gauntlet, first asking for a flowchart of the stack script and then another flowchart of the game card script. The flowcharts it produced were rather cryptic but I learned they were an open source flowcharting and diagramming program called Mermaid (Mermaidchart.com). The cryptic format looked like this:

graph TD
A[preOpenStack] --> B[setupGraphics]
A --> C[loadPreferences]
A --> D[optimizeAssets]

B --> E[setCompositorType]
B --> F[setTileSize]
B --> G[setCacheLimit]

However when I opened the online Mermaid editor it allowed me to paste this code in the left window of the editor and it produced a nice flowchart in the right window which can be saved as a png. Pretty cool.

[attachment=0]mermaid flowchart example.png[/attachment]

SUBTIP: I only had to change one measly line in Galactic Gauntlet to get it running in LC 9.6.9 (GG was created in version 6 days...wonderful course BTW):

--revFontLoad (rootPath() & "/assets/gun4fi.ttf") [NOTE: revFontLoad changes to "start using font file..."]
start using font file (rootPath() & "/assets/gun4fi.ttf")

Happy coding, Mike

richmond62 · Post by **richmond62** » Tue Aug 08, 2023 2:28 pm

The only thing I wonder is what one might do with that sort of flowchart subsequently.
-

Hutchboy · Post by **Hutchboy** » Tue Aug 08, 2023 2:53 pm

For me personally the flowchart just helps me visualize things, especially when I get lost in the weeds on long code that I am writing or that I am trying to understand. In my setup I have two Macs and two displays, so throwing the flowcharts up on one Mac helps me when I run up against cognitive load issues. The .png flowchart isn't as useful as I would like, the Mermaid program allows saving as an .svg, but the output I see is only black rectangles rather than text blocks...something to investigate.

stam · Post by **stam** » Tue Aug 08, 2023 8:01 pm

Hutchboy wrote: ↑
Tue Aug 08, 2023 2:21 pm
However when I opened the online Mermaid editor it allowed me to paste this code in the left window of the editor and it produced a nice flowchart in the right window which can be saved as a png. Pretty cool.

That is pretty cool, thanks for sharing Mike!

I wonder how hard this would be to do within LC itself? I’ve often felt the need for this in larger apps (not that my apps are huge, but still). And having within LC would allow navigation to the correct script… a feature request for the future?

SWEdeAndy · Post by **SWEdeAndy** » Wed Aug 09, 2023 8:21 am

OK, this is seriously cool! It's something that would be interesting to tack onto my ScriptDependencies tool
(https://github.com/wheninspace/WIS_ScriptDepedencies). I wanted a more graphical output there, but found it daunting to create flowchart functionality from scratch in LC. This may be a game changer!
As it turns out, Mermaid can easily be run in a browser widget in LC (https://mermaid.js.org/config/usage.html#using-mermaid)!

Example: Create a browser widget in an LC stack and then set it's htmlText to this:

Code: Select all

<!DOCTYPE html>
<html lang="en">
  <body>
    <pre class="mermaid">
  graph LR
      A[mouseUp] --- B[doStuff]
      B-->C[doMoreStuff]
      B-->D(doOtherStuff);
    </pre>
    <script type="module">
      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
    </script>
  </body>
</html>

If I find time, I'll see if I can convert the output from ScriptDependencies directly to flowchart syntax and chuck it into a Mermaid code block in a browser widget.

Than you so much Mike for this tip! It opens up thrilling possibilities for LC integration!

richmond62 · Post by **richmond62** » Wed Aug 09, 2023 12:20 pm

I have deleted my comment as it was not relevant.

SWEdeAndy · Post by **SWEdeAndy** » Wed Aug 09, 2023 3:12 pm

Oh wow, guys! It's working!!!

I just tweaked a function in ScriptDependencies a little to spit out the hierarchy map as flowchart syntax, and the browser widget promptly gives me this:

It's the result of ScriptDependencies analysing it's own scripts, and showing the handler call flows.

I'll swiftly get this into a new release of ScriptDependencies for all to play with!

If I can also get clicks in the graph to feed back into the tool to hilite the relevant handler, then we're seriously getting somewhere with this!

stam · Post by **stam** » Wed Aug 09, 2023 8:05 pm

Impressive!!!

AndyP · Post by **AndyP** » Thu Aug 10, 2023 9:29 am

This is going to be super helpful. Looking forward to your update to the already fantastic ScriptDependencies tool.

Also I think the making of this this would make a great Livecode blog post?

SWEdeAndy · Post by **SWEdeAndy** » Thu Aug 10, 2023 3:03 pm

So, I spent a few hours on this and now have something pretty cool to show! Again the wonderful browser widget has opened a portal to an entire coding galaxy out there, bringing amazing features right into LiveCode!

Download the latest version of WIS_ScriptDepedencies here:
https://github.com/wheninspace/WIS_Scri ... ses/latest

For those new to it: Open the stack and then click a + button to load one or more stacks to be analysed here:

: ScD1.png (14.05 KiB) Viewed 32381 times

Then select them in the list and hit the Start mapping button and when it's done, click the new Create flowchart button towards the bottom-right:

: ScD2.png (2.31 KiB) Viewed 32381 times

The flowchart is presented in a substack that you can drag to resize. Big flowcharts tend to get small font sizes, so a large screen is to prefer.
Click on handler names in the chart to have them highlighted back in the main stack.

SWEdeAndy · Post by **SWEdeAndy** » Thu Aug 10, 2023 3:33 pm

AndyP wrote: ↑
Thu Aug 10, 2023 9:29 am
This is going to be super helpful. Looking forward to your update to the already fantastic ScriptDependencies tool.

Also I think the making of this this would make a great Livecode blog post?

Thanks, Andy! Sure, I suppose this could be of interest to some LC blog readers. Let's see if the mothership picks up on it, or if they'll need a hint...

SWEdeAndy · Post by **SWEdeAndy** » Thu Aug 10, 2023 4:02 pm

I just tested the stack in Windows 10 now, and, disappointingly, the flowchart does not work there!

I suppose it's the "import mermaid" line that the native Win browser doesn't process somehow...

Can any Windows-savvy person find a solution?

It works beautifully on Mac though... (If I had a penny every time I've said that etc...

)

stam · Post by **stam** » Thu Aug 10, 2023 5:51 pm

what would be even cooler is if some talented/interested person ported the Mermaid javascript library https://github.com/mermaid-js/mermaid to a livecode library... or maybe someone has?

Hutchboy · Post by **Hutchboy** » Thu Sep 14, 2023 2:52 pm

TIP 2: Prototyping Layouts using AI Chatbots

In both Claude and ChatGPT Plus AI's I have found that it is quite easy to prompt the AI to layout a UI for you. Here is a prompt and response from Claude for an old game I used to play on a teletype machine at university in the 70's which I remember as "Galaxy" but is more commonly called "Star Trek" or "Super Star Trek".

<Me: Suggest a color scheme for the UI for this game that would have a retro look.>

<Claude: Here is one suggestion for a retro color scheme for the Super Star Trek game UI:

- Background color:
- Dark blue (#000033) to look like space

- Button colors:
- Navigation/commands - orange (#FF950E)
- Other buttons - light gray (#D9D9D9) with dark gray (#A9A9A9) borders

- Status bars:
- Background: black (#000000)
- Foreground (level): green (#00FF00)

- Sector map:
- Empty sector - light gray (#D9D9D9)
- Enterprise sector - yellow (#FFFF00)
- Klingon sector - red (#FF0000)
- Star sector - white (#FFFFFF)
- Starbase sector - light blue (#00FFFF)

- Text:
- Headers/titles - yellow (#FFFF00)
- Messages - white (#FFFFFF)

- Borders:
- Buttons - dark gray (#A9A9A9)
- Message box - light gray (#D9D9D9)

This uses a limited color palette with bright primary colors on dark backgrounds to create a retro sci-fi feel. The dark blue background represents space, while the bright colors stand out on top of it. >

Additionally the AI can suggest positions and size of the UI elements for a given screen size. You can even ask for a LiveCode script to generate the layout if you want, which is kind of cool. For me I use it to iterate through concepts relatively quickly. Hope this gives you some ideas.

Happy Coding,

Mike

LiveCode Forums

Tips: LiveCode and AI Chatbots

Tips: LiveCode and AI Chatbots

Re: Tips: LiveCode and AI Chatbots

Re: Tips: LiveCode and AI Chatbots

Re: Tips: LiveCode and AI Chatbots

Re: Tips: LiveCode and AI Chatbots

Re: Tips: LiveCode and AI Chatbots

Re: Tips: LiveCode and AI Chatbots

Re: Tips: LiveCode and AI Chatbots

Re: Tips: LiveCode and AI Chatbots

Re: Tips: LiveCode and AI Chatbots

Re: Tips: LiveCode and AI Chatbots

Re: Tips: LiveCode and AI Chatbots

Re: Tips: LiveCode and AI Chatbots

Re: Tips: LiveCode and AI Chatbots