Using ChatGPT with and or about TiddlyWiki

#13

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.

1 Like
#14

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.

3 Likes
#15

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.

#16

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.

1 Like
#17

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

Snag_261e83b
Snag_261e83b2446×229 43.6 KB

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

#18

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.

#19

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. …

1 Like
#20

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
2 Likes
#21

Another example of ChatGPT, where I created a bookmarklet for setting the window name of a tab Bookmarklets, Just in Time install, Windows work flow and Timimi - #8 by TW_Tones

Wow

#22

I returned to ChatGPT4 and asked this; The answer possibly stolen from one of our members, but I created it and it worked.

There is a standard way to write the javascript for filter functions in tiddlywiki, can you help me write one?

Certainly! In TiddlyWiki, a filter is a sequence of steps that select a set of tiddlers from the entire wiki. Each step in a filter can transform the current set of titles by adding to it, removing from it, or otherwise changing it.

To write a filter function in TiddlyWiki using JavaScript, you would typically create a JavaScript macro or a plugin that defines a new filter operator.

Here’s a basic outline of steps to create a custom filter function in TiddlyWiki:

  1. Define a JavaScript Macro or Plugin: Create a new tiddler with a type of application/javascript.
  2. Create a Filter Function: Define a function that will act as your filter. The function should accept an operand (if your filter operator requires one), an array of titles to filter, and an optional callback function for a run prefix.
  3. Register the Filter Operator: Use the $tw global object to register your filter function as a new filter operator.
  4. Use the Filter: Once the operator is registered, you can use your new filter in filter expressions anywhere in your TiddlyWiki.

Here’s a simple example of a filter operator that filters tiddlers by checking if their title includes a certain string:

/*\
title: $:/plugins/myusername/myfilteroperator.js
type: application/javascript
module-type: filteroperator

\*/

(function(){

/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";

/*
Export our filter function
*/
exports.myfilter = function(source, operator, options) {
    // operator.operand is the text that the filter operator is being applied with
    var text = operator.operand.toLowerCase();
    // operator.prefix determines if it's a negation
    var invert = operator.prefix === "!";
    // source is the list of tiddler titles being filtered
    var results = [];
    source(function(tiddler,title) {
        if(title && title.toLowerCase().indexOf(text) !== -1 !== invert) {
            results.push(title);
        }
    });
    return results;
};

})();

This code defines a filter operator named myfilter that includes tiddlers if their title includes the given operand text.

To use this new filter, you’d add your operand in a filter run like this:

[myfilter[searchText]]

Or to use the negation:

[!myfilter[searchText]]

Make sure to replace searchText with the actual text you want to filter by.

Please note that you should be comfortable with JavaScript and familiar with the TiddlyWiki development environment before attempting to create custom filters. Also, ensure to test your filters carefully to ensure they work as expected within your TiddlyWiki environment.

now to test if it can modify this to perform more sophisticated functions

#23

Just an update, I made a number of filters that worked quickly and easily,

  • total fieldname given a fieldname will sum all input tiddler titles fieldname field
  • totalcost, which if given two fieldnames will multiply one by the other an sum them all

This can off course be achieved with regular filters and or functions but they are useful for simplication purposes.

What is an operator you would like to see?

#24

I think we need a thread with curated one-liners.

#25

Maybe AI could help us write TiddlyWiki documentation that is lacking?

#26

There has been new releases of the LLM used for ChatGPT that can be provided documents to ingest and provide feedback and information on.

If one were to build one of these LLM and feed it individual tiddlers from TiddlyWiki.com, it would likely be able to provide accurate information and list areas that could use further elaboration and suggest areas that require further documentation.

I was just watching a YT video regarding this yesterday, I believe a new version was just released that functions very well. Edit: a YT video just on llm’s sadly no one has begun making a tiddlywiki specific gpt model :pensive:

#27

I saw this thread yesterday ChatGPT - Tutor TiddlyWiki
I did not try it though

#28

I just loaded empty.html into ChatGPT and started asking questions (TiddlyWiki.com is too big).

Other questions are giving bag answers.

what standards can you determine for each of the modual-types?

In TiddlyWiki, module types are an integral part of its modular architecture, each serving specific purposes and adhering to certain standards. Here’s an overview of the common module types and their standards:

1. Widget Modules

  • Purpose: Widgets are the building blocks of TiddlyWiki’s user interface. They provide interactive components like buttons, links, lists, etc.
  • Standards:
    • Defined in JavaScript.
    • Must export a widget class extending from the base widget class.
    • Typically interact with the DOM and handle user input.

2. Macro Modules

  • Purpose: Macros are reusable code blocks for generating content. They can be invoked in Tiddlers to perform specific tasks.
  • Standards:
    • Can be defined in WikiText or JavaScript.
    • JavaScript macros should export a function that returns a string representing the HTML content.
    • Often used for text processing and dynamic content generation.

3. Filter Operator Modules

  • Purpose: Filter operators are functions used in TiddlyWiki’s powerful filtering system to select and manipulate Tiddlers.
  • Standards:
    • Written in JavaScript.
    • Export a function that defines the filter operation.
    • Should handle an array of titles and return an array based on the filter logic.

4. Parser Modules

  • Purpose: Parsers interpret and convert content in various formats (like Markdown, WikiText) into HTML.
  • Standards:
    • Implemented in JavaScript.
    • Must export a parser class with methods for parsing text.
    • Should be efficient in converting text to HTML elements.

5. Startup Modules

  • Purpose: Executed when TiddlyWiki starts, these modules initialize various aspects of the application.
  • Standards:
    • Typically JavaScript modules.
    • Must export a startup function.
    • Often used for setting up global state, registering event listeners, or initializing services.

6. Stylesheet Modules

  • Purpose: Define CSS styles used throughout the wiki.
  • Standards:
    • Can be written as CSS tiddlers or embedded within Tiddlers.
    • Automatically applied to the wiki’s global style.
    • Useful for theming and customizing the appearance.

7. Saver Modules

  • Purpose: Handle the saving of TiddlyWiki data to different locations or formats.
  • Standards:
    • Written in JavaScript.
    • Should export functions to manage the save process.
    • Often interacts with external systems or local storage.

8. Server Modules

  • Purpose: Used for running TiddlyWiki in a Node.js environment, handling server-side operations.
  • Standards:
    • JavaScript modules.
    • Include functionality for handling HTTP requests, serving files, and managing server-side tiddler storage.

Best Practices for Developing Modules

  • Follow the TiddlyWiki documentation for specific guidelines and API usage.
  • Ensure compatibility with different environments (e.g., browsers, Node.js).
  • Maintain performance and security, especially for modules that interact with external systems or modify core functionality.
  • Test extensively to ensure reliability and compatibility with other TiddlyWiki components.

Understanding these module types and their standards is crucial for extending and customizing TiddlyWiki effectively. Each module type has a specific role and follows conventions that align with TiddlyWiki’s flexible and modular design philosophy.

#29

Another update on my Journey to leverage ChatGPT for tiddlywiki.

Just now I created an SVG image to see if I could then use parameters to populate its labels, thus one could use it as an element in a presentation or provide links to corosponding lists or tiddlers.

I have started building a custom ChatGPT for tiddlywiki as a result of seeing someone elses attempt https://chat.openai.com/g/g-sHnokUbgB-tiddlywiki-guide.

  • Still it is not yet able to write complete JavaScript modules for me yet, although it has a go.
  • If you give it a modual you can get good advice to add something to it.
2 Likes
#30

Over here Organizing computer data files and matching to TiddlyWiki - #16 by TW_Tones we are clasifying and naming images with GatGPT. The resulting text can be placed with the image to aid search

1 Like
#31

I recently started playing around with Faraday.dev, I find it rather slow and buggy, but I think that’s mainly due to the fact I am running it on a Late 2014 Mac mini. There’s also Poe and you.com I have been using. I think some of the terms with ChatGPT are rather confusing to understand, so I really suggest starting with Faraday, as that might be a better way if you are interested in training the model with your own data. However that approach is rather slow so that’s where it might be worth it to pay for a subscription.

#32

Today I wanted to edit the tiddlywiki Home icon to contain a H inside the house.

So I gave ChatGPT the current Home image svg and asked it to place a letter inside it. After I worked out the size of the text needed to be larger, even if the button as a whole is smaller, I go a working image.

Snag_32a19edd

As a result I created this button, which opens the tiddler named in a config tiddler, rather than close all and default tiddlers. Defaults to Home

It is easy to edit the image and use another letter if you want.

home-tiddler.json (2.3 KB)

3 Likes