Using ChatGPT with and or about TiddlyWiki

[TW_Tones]

I have being exploring the use of ChatGPT in general, learing how best it can be used, its strengths and Limitations. I am using TiddlyWiki to store Knowledge obtained through ChatGPT and exploring what it knows about Tiddlywiki.

I thought I would start this discussion to share our experience and observations, to discover what it any supporting tools and other issues arise.

• If you want to share results it could get quite verbose so consider sharing the Question put and not the answers.

A few of my observations;

• If a TiddlyWiki question is asked who’s answer includes code;
  • A working Javascript snipit worked
  • However most other cases it seems to give rubbish code, confused with python?
• When I copy results containing bullets, I have to delete blank lines between list items before applying bullets in the editor. I would like to make this easier.
• I found some value in asking it to rewrite the results, try the following two requests.
  • What are the key values of writing your own software?
  • Rewrite the above relating to the subject of TiddlyWiki
• Asking questions relating to things you are knowledgeable about, helps you understand how well it works, so that when you ask questions about subjects you don’t know about.
• Its quite good for generating easy to read content, but check it’s claims.
• It does not understand “tiddlywiki edition” perfectly.
• Try “what is a tiddler” and “what is tiddlywiki” the answers are reasonable?
• I wonder if we publish “ChatGPT content” on the internet that in future versions and data sweeps it will reinforce itself, published “ChatGPT content” is rarely flagged as such.
• Using ChatGPT to generate Prose relating to a subject, then saving it in a searchable tiddler is a great way to increase the searchability of content buy introducing related terms, for example “what is tiddlywiki” results in content containing
  • personal web notebook, self-contained, tiddlers, text, Images, links, and even embedded videos or audio files, free and open-source software and MORE.
  • You could then add content in the found tiddler guiding the user to your tools in relation to the subject, including links to other content in your wiki.

What are your observations and learnings?

[TW_Tones]

ChatGPT Mention

@btheado

Off-topic for here, but I didn’t write or modify a single line of that code. ChatGPT generated it all based on instructions from me. I’m very impressed.

[Justin_H]

I’ve so played with it quite a bit, and its quite good at explaining the topics, but falls short of functional code.

Seems like gpt doesn’t grasp how the functions of tiddlywiki work.

I was asking it methods for using the color macro inside of a definition to see its response and it decided that there should be a macro named $add and that the specific color in the palette was a seperate tiddler.

Needless to say, it was not built to assist with tiddlyaiki things (yet)

[btheado]

I’ve only tried ChatGPT with code twice. The first time I was just experimenting and the results were mixed. In the past I have implemented the scoring rules of a poker dice game called “Yahtzee” and used it to help teach programming to some teenagers.

I decided to see how well ChatGPT could do and I gave it this prompt:

Write a python function which takes a list of 5 dice values as input and outputs a yahtzee score of 25 if the dice are a full house and 0 otherwise

ChatGPT nailed it. Just a few lines of code exactly how I would have implemented it. But then I asked it to write a scoring function for “small straight” (4 out of 5 dice in sequence). Here it gave me a good implementation of large straight (all 5 dice in a row which is easier to implement). It went way out to left field and it took me 8-10 back and forth before I got a proper implementation.

The javascript bookmarklet I wrote did not give mixed results. The result at every step was jaw-dropping good. It would have taken me far longer to write the code myself, than with ChatGPT.

If I were to implement it myself, I would play around in the javascript console in order to iterate in very small steps. I would have taken several trips to the Mozilla developer docs. With ChatGPT I still took small steps, but not nearly as small as I would have for myself.

I’ll share the prompts I gave and the code output from the first step, but for brevity I’ll omit the in between outputs. The final result you can see in the other thread.

Prompt:

Write some javascript code which will:

Find all the links in the current document matching the selector ‘a.attachment’
For each match whose href attribute ends in .json, use fetch to retrieve the json from the url indicated by the href
Put the json in a pre tag as a sibling of each original anchor node

The output it gave looked perfect to me:

// Find all links with class 'attachment'
const links = document.querySelectorAll('a.attachment');

// Loop through each link
links.forEach(link => {
  // Check if the href ends in .json
  if (link.getAttribute('href').endsWith('.json')) {
    // Use fetch to get the JSON data
    fetch(link.getAttribute('href'))
      .then(response => response.json())
      .then(jsonData => {
        // Create a pre tag
        const pre = document.createElement('pre');
        pre.textContent = JSON.stringify(jsonData, null, 2);
        // Add the pre tag as a sibling of the original link
        link.parentNode.insertBefore(pre, link.nextSibling);
      })
      .catch(error => console.error(`Error fetching ${link.getAttribute('href')}: ${error}`));
  }
});

My next prompt:

That worked well! Thanks. Can you change it so that instead of a pre tag with the json, it is a link with the href constructed from encoding the json using encodeURIComponent. Add a prefix of “https://tiddlywiki.com/prerelease/share##” to the href. Use “open in tw share site” for the link text.

The result from what I could tell behaved similarly perfect except the download link and the “open in share site” link were “squished” together.

Therefore, I gave this prompt:

Will you add some separate between the two links? Maybe using the text " | "

In spite of my misspelling/typo (s/separate/separation/) it was still able to follow the instructions.

I decided I didn’t want any errors in the console so I gave it this last instruction:

instead of logging to the console when there is a fetch error will you insert the error next to the original link? Style the error to make it obvious it is an error

The result is the code I shared in the other thread.

Maybe ChatGPT is particularly good with DOM-related javascript code.

[TW_Tones]

Thanks for Sharing your experience @btheado.

@btheado

Maybe ChatGPT is particularly good with DOM-related javascript code.

Yes, I see here your questions are independent of tiddlywiki, independent JavaScript, although designed by you, to work with tiddlywiki.

• This indicates something about your approach and how it led to usable code.

Perhaps this A.I. could be more appropriately considered “Augmented Instructions”.

I admit having being interested in AI (Artificial Intelligence) and “following our human endeavours, since being a child of the 70’s”, and an IT Professional, I am interested in this “machine learning”, but there may not be much “natural intelligence” coming from those people who call this “Artificial Intelligence”.

Perhaps it’s from M.I. “Marketing Intelligence” if that is not an oxymoron

[gabrielmontagne]

One could think of ChatGPT as a mashup of OpenAI APIs that one can use directly, and with more control. And, if you wanted, you could integrate it from TW directly.

The “chat format” is just a convenient way to interact with the language model, where the model is not the agent, but it tries to generate plausible text between a human and an agent. If you use the API directly you can bypass some of that, or enhance it. For example, you could start the answer to force the agent to take it in the direction that you need.

I wrote a simple wrapper for it so I use it from my text editor. You can check it out here: GitHub - gabrielmontagne/shonenbat . You can build up a “conversation” by posting all the previous Q&As every time + your next prompt.

Also, if you don’t implement it, you won’t have that Politically Correct “safety” on top of it. Which, for me, is a plus.

In some ways, it’d seem that ChatGPT is just a primed interaction in this spirit:

– please note the difference in the initial prompts and the resulting reactions. That toy test conversation was built a question at a time.

OpenAI also has some other APIs to gauge if an utterance is safe/politically correct, and some more specialized APIs for completing code and for generating images.

Again, you get more control if you use the APIs directly. You can control the temperature, the amount of answers you want, etc. The format, which doesn’t have to be a dialog. And you can ask it to complete something inside the text, not just at the end.

hth. Gabriel

[TW_Tones]

I recently asked a question about HTML

What html tags need not be closed?

then a follow up

are there more?

I got quite a good answer but the html in the answer pasted into tiddlywiki needed

• Blank lines between numbered items removed
• Apply the # or numbered bullets to the list items
• Using the AB button to mark the named tags as code so I could see them

[Edited] Placing \rules except html at the top of the tiddler stopped tiddlywiki attempting to interpret these tags in the content.

• You can to the same with \rules except wikilink if the content uses camel case you want to hide

[michalradacz]

I am using GPT for generating short texts and some conceptual models, because I am to lazy entering it manually. For example, GPT can easyily creates simple schemes for DB tables, keys, attributes, etc. I have some TW wiki with iframed GPT (simple iframe to chat) and then manually copy right results to tiddlers.

[TW_Tones]

Can your share the kinds of questions you asked to get useful results?

[linonetwo]

Have you tried asking gpt to output the wikitext in a code block? In this way you can copy the list more easily.

You need to be specific about your want tiddlywiki wikitext.

I recently also trying to train a custom model that can auto create ui of tw plugin, I may use GitHub issue and discussion and Q&A in the forum (if I can get exported db data, it would be better, than crawl it). I’m using an open source model called chatrwkv.

[TW_Tones]

Here is another example of using ChatGPT to Genrate hybrid HTML and TiddlyWiki code.

Wrap a table in a tiddlywiki list widget

then

Also wrap Row 1 in a list widget

Sure! To wrap Row 1 of the table in a TiddlyWiki list widget, you can modify the previous code as follows:

<$list filter="[tag[Table]]">
  <table>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
    <$list filter="[tag[Row1]]">
      <tr>
        <td>Row 1, Column 1</td>
        <td>Row 1, Column 2</td>
        <td>Row 1, Column 3</td>
      </tr>
    </$list>
  </table>
</$list>

• I deleted row 2

Impresive way to use short text to generate longer code you can use.

[TW_Tones]

@Justin_H

I’ve so played with it quite a bit, and its quite good at explaining the topics, but falls short of functional code.

See here, I did a few things to generate HTML tables we can use In tiddlywiki Some TiddlyWiki CSS questions - #7 by TW_Tones then later I tried getting it to create tables in TiddlyWiki Table wiki text.

• It was not perfect so I gave a thumbs down
• It then asked me what to fix, in this case replace || with | and it did so.
• Insubsequent texts it worked for exaple;

Generate a tiddlywiki table with the columns needed for an invoice

Sure, here’s an example of a TiddlyWiki table with the columns needed for an invoice:

|! Date       |! Description                 |! Quantity |! Unit Price |! Total |
| 2023-03-26 | Website design and hosting   | 1         | 1000.00     | 1000.00 |
| 2023-03-27 | Social media marketing       | 3         | 500.00      | 1500.00 |
| 2023-03-28 | Logo design                  | 1         | 800.00      | 800.00  |
| 2023-03-29 | Copywriting                  | 2         | 300.00      | 600.00  |
| 2023-03-30 | Photography and video        | 1         | 1200.00     | 1200.00 |
|            |                              |           | **Total**   | **5100.00** |

In this example, the table has five columns:

• Date: The date the item was billed.
• Description: A brief description of the item or service.
• Quantity: The quantity of the item or service billed.
• Unit Price: The unit price of the item or service.
• Total: The total amount billed for the item or service.

The last row of the table is used to calculate the total amount billed for all items or services. The total row is created by leaving the first cell of the row empty, and using bold formatting to indicate that it is a total row.

You can copy and paste this code into a TiddlyWiki tiddler, and the table will be rendered as HTML in the view mode of the tiddler.

Wow!

[Alan_101]

I got access to Google’s Bard this morning. I asked it about TiddlyWiki and then asked it to solve an issue that has got me stumped. Haven’t asked in here before as I’m sure the answer is obvious and I’ve missed it somewhere.

ME:
What do you know about the software called TiddlyWiki?

TiddlyWiki is a personal wiki and non-linear notebook for organizing and sharing complex information. It is an open-source single page application wiki in the form of a single HTML file that includes CSS, JavaScript, embedded files such as images, and the text content. It is designed to be easy to customize and re-shape depending on application. It facilitates re-use of content by dividing it into small pieces called Tiddlers. Multilingual, over 30 languages in TiddlyWiki 5.1. 23.

TiddlyWiki is an unusual example of a practical quine. This idea of producing a copy of its own source code that lies at the heart of TiddlyWiki’s ability to independently save changes to itself. Quine is also the name of the unofficial TiddlyWiki application for iPhone/iPad.

TiddlyWiki is a powerful tool that can be used for a variety of purposes, such as:

Taking notes
Organizing information
Creating a personal knowledge base
Sharing information with others
Creating a blog
Creating a website

TiddlyWiki is a versatile tool that can be used by anyone, from students and professionals to artists and writers. It is a great way to keep track of information and to organize your thoughts.
Sources - Learn more

en.wikipedia.org/wiki/TiddlyWiki 

Search related topics
ME:
Do you know how to make a table of information in a TiddlyWiki Tiddler?

Yes, I do know how to make a table of information in a TiddlyWiki Tiddler. To do this, you can use the following syntax:

! Title of the table

Header 1	Header 2
Value 1	Value 2
Value 3	Value 4

This will create a table with three columns and four rows. The first row will contain the headers, and the remaining rows will contain the values. You can then add more rows and columns as needed.

Here is an example of a table of information in a TiddlyWiki Tiddler:

! My Table

Name	Age	Location
John	30	New York
Mary	25	London
Peter	20	Paris

This table can be used to store information about people, places, or anything else. It can also be used to create a list of items, such as a grocery list or a to-do list.
ME:
Can a table be created from other tiddler fields. For example. If I had a series Tiddlers with a tag ‘People’ in each of them and each tiddler had fields for Name, Age, and Location; can a table be created that uses the information from these fields of all tiddlers with the tag ‘People’?

Yes, a table can be created from other tiddler fields. To do this, you can use the following formula:

! Table of People

Name	Age	Location
{{ [[People	Name]] }}	{{ [[People

This formula will create a table with three columns and one row for each tiddler that has the tag ‘People’. The first column will contain the name of the person, the second column will contain their age, and the third column will contain their location.

Here is an example of a table of people created from other tiddler fields:

! Table of People

Name	Age	Location
John	30	New York
Mary	25	London
Peter	20	Paris

This table can be used to easily find information about the people in your TiddlyWiki.
ME:
Thanks. I will try this shortly. I will get back to you later. I have a few other things I need to do now.

You’re welcome! I am glad I could be of assistance. Please feel free to ask me any other questions you may have.
ME:
Unfortuantly your code didn’t work. It just displays as

Table of People
Name Age Location
:—: :—: :—:
{{ People }} {{ People }} {{ People }}
I apologize that my code did not work. I am still under development, and I am always learning. I will try my best to help you with your TiddlyWiki needs.

Here is a possible explanation for why my code did not work:

The tag People is not defined in your TiddlyWiki.
The fields Name, Age, and Location are not defined in your TiddlyWiki.
You are using the wrong formula.

If you are still having trouble, please feel free to ask me for help. I will try my best to assist you.

[etardiff]

Your code isn’t displaying properly (try surrounding it with backticks as per the preformatted text style), but from what I can see, I’m afraid it’s quite off-base. I think you’re looking for something more like this:

<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Location</th>
</tr>
<$list filter="[tag[People]]">
<tr>
<td>{{!!title}}</td>
<td>{{!!age}}</td>
<td>{{!!location}}</td>
</tr>
</$list>
</table>

Notes:

• I can’t tell whether the AI gave you a valid TW table or not since the code is being rendered by the Discourse parser, but looking at :—: :—: :—:, I suspect not. Wikitext doesn’t use colons like that.
• I’m also not sure whether it used a list widget, but you need one to collect all the tiddlers with the People tag. I put it inside the table and after the the header row because we want one row per person, not one table per person. (I’m also using HTML rather than wikitext to generate the table because it’s much easier when working with lists.)
• To populate each row, you’ll need field transclusions. I used {{!!title}} in the first cell on the assumption that the name of the tiddler is the name of the person, but if you’re using a different naming scheme, you could use {{!!caption}} or even {{!!name}} instead.
• {{!!age}} and {{!!location}} take their values from the “age” and “location” fields of each “People” tiddler.

I’d be interested to see the code it did give you! I’d definitely take any output with a generous grain of salt, though: the issue with AI chatbots is that they tend to be very confidently wrong.

[Alan_101]

Thanks etardiff. Your code worked great.

I noticed what the AI gave me didn’t quite match what dispalyed in my comment but it didn’t make use of transclusions.

I’ve had similar code experience with ChatGTP working with Windows Command Line code. It looked nice but didn’t quite work and it was unable to fix it after multiple attempts.

Looking forward to how both of these develop over time.

[TW_Tones]

I just asked ChatGPT (V4 to be exact) “can you give me your last answer in tiddlywiki markup”

It uses correct link and bullet markup

Of course! Here is the previous answer in TiddlyWiki markup format, which includes bullet points and external links:

* [[National Institute of Standards and Technology (NIST)|https://www.nist.gov/pml/atomic-spectroscopy-databases]]: The NIST provides various databases for different parts of the electromagnetic spectrum, including atomic spectra, molecular spectra, and X-ray spectra.

* [[NASA's Goddard Space Flight Center|https://science.gsfc.nasa.gov/ast/uvvisible/spectrum]]: NASA's Goddard Space Flight Center has a few databases related to the electromagnetic spectrum, such as UV, visible, and infrared data.

* [[HITRAN Database|https://hitran.org]]: The HITRAN (HIgh-resolution TRANsmission molecular absorption) database contains high-resolution spectroscopic data for various molecules in the infrared, visible, and ultraviolet regions of the spectrum.

* [[Splatalogue Database|https://splatalogue.online]]: Splatalogue is a comprehensive database of spectral lines from various molecules, covering radio and microwave frequencies. This can be helpful if you are looking for data in that specific range of the electromagnetic spectrum.

While these sources do not cover the entire electromagnetic spectrum, they offer a good starting point for your research. Please note that you may need to register or request access to some of these resources, and the format of the data may vary depending on the source.

Simply copy and paste this text into a Tiddler within your TiddlyWiki, and it should display the content with the proper formatting, including bullet points and clickable links.

[TW_Tones]

But then I asked “Could you place the title and text in a tiddlywiki table format”

• I did not want the content centred so I asked “please remove spaces around |”.

Here is the visual result

You can see how ChatGPT is an editors or authors assistant.

[pmario]

You would need to tell it the difference about TW table syntax first … and than ask again.

I did try to tell it:

|Left aligned content |

has no space between the leading | character and the following text

| Right aligned content|

has a space after the first | and has no space before the next |

| Centred content |

has a leading a trailing space

And then I asked

So can you show me an example table using tiddlywiki wikitext syntax where headers are centered and text is left aligned?

The answer was a markdown-like table … but I’m using chatGPT 3.5. …

So it would be interesting if you could tell v4 the right syntax and than ask again.

[pmario]

I did an other test like so:

Copy paste the whole content from: https://tiddlywiki.com/#Tables%20in%20WikiText into the user text box. With a preamble like: “TW syntax descriptions is this:” following by the text copied from the link

Then I asked again:

“So can you show me an example table using tiddlywiki wikitext syntax where headers are centered and text is left aligned?”

I got the answer:

Sure, here’s an example table where the header cells are centered and the data cells are left aligned:

|!^Header 1 |!^Header 2 |
|Left aligned content |Left aligned content |
|Another left aligned content |Another left aligned content |

This will create a table with two columns and two rows of data, where the header cells are centered and the data cells are left aligned. Note that the ! character before the header cells indicates that they are header cells, and the ^ character before the first header cell indicates that it should be vertically aligned to the top.

---

So the top-alignment for the header is not right, but the text formatting is right now. …

[TW_Tones]

Independently of tiddlywiki, and like I expected many others, I am researching how I can make full use of such technology. At this point in my research it is proving to be very useful.

My key observations are;

• maintain scepticism of the output
• learning what questions and how to ask questions, is the key to identifying its value
• prompting or priming the system is also helpful
• don’t accept poor answers. Provide feedback