Tinderbox Meetup - Sunday, June 4, 2023: Introduction of Posters, Demo with ChatGPT Curl Integration
| Level | Intermediate |
| Published Date | 6/5/23 |
| Revision | 1 |
| Type | Meetup |
| Tags | 5Cs, 5Cs Learning and Knowledge Management, ChatGPT, Curl, Javascript, Open Source, Posters, Tinderbox, Visualization |
| Video Length | 00:00 |
| Video URL | https://youtu.be/jiXIhQ6QZtc |
| Example File | Detlef’s ChatGPT Demo: OpenAI-Demo.tbx (294.1 KB); Tinderbox Posters.tbx (843.6 KB) |
| TBX Version | 9.5 |
| Instructor | Michael Becker |
| Forum Post URL | Tinderbox Meetup April 1, 2023 Video: Lists, Tables, Action Code and Export Code Oh Boy! |
| Related Lessons |
In this Tinderbox lesson, we review the introduction of Posters, a new feature being added to TBX to leverage open-source javascript libraries for visualization. We also reviewed a ChatGPT integration leveraging Curl commands.
Agenda
- ChatGPT Integration with Curl
- 9.6 Review: Introduction of Posters
- Other
Curl ChatGPT Integration
Detlef provide us with a demo to integrate ChatCPT with Tinderbox using Curl and ChatGPT’s API.
You can download @webline’s demo here.
9.6 Review: Introduction of Posters
TBX, 9.6 coming out in about a month, introducing new feature “Posters”. Can access TBX Backstage for $100.
Point of posters: Leverage open-source libraries that have been created for people do do visualization and computational task on the web. Now we can do all of them on Tinderbox.
Explains how to insert an open-source library in a template or body of a note or template.
Questions about Posters:
Q: Do posters have a lot of overhead?
A: Not, the physical storages, their memory usage is all dependent on the library.
Q: How do export?
A: Power is nothing more than a template, so it can be exported as a valid HTML Page.
Q: Posters are Applets or Widgets?
A: Their more like widgets.
Q: When do I use a poster?
A: Where it adds value to your work.
Q: What is the best value of the power?
A: Let’s us bring new visualize capabilities into TBX without having to build it into the app. We can leverage the open-source community. Posters are a “portal into a series of other people’s problems; we can leverage their work.”
Q: How to use libraries?
A: Read their examples. Experiment with them. The challenge may be how to figure out how to plugin the data (the developer often assumes this as common knowledge; ask questions).
How Name a Saved Gallery View
Yes, you can name the Gallery tab upon saving.
Example Open-Source Libraries
- AsciiMath, AsciiMath is an easy-to-write markup language for mathematics.
- MermaidMermaid Diagramming and charting tool
- Vexflow, VexFlow is an open-source online music notation rendering API. It is written completely in JavaScript, and runs right in the browser. VexFlow supports HTML5 Canvas and SVG.
- Chart.js, Simple yet flexible JavaScript charting library for the modern web
- Google Chars, Google chart tools are powerful, simple to use, and free. Try out our rich gallery of interactive charts and data tools.
- Plotly, Plotly.js is a high-level, declarative charting library. plotly.js ships with over 40 chart types, including 3D charts, statistical graphs, and SVG maps
- Smiles. Chemical structure mapping
- Cytoscape, Network Data Integration, Analysis, and Visualization in a Box
- DIFF, Diff Match Patch is a high-performance library in multiple languages that manipulates plain text.
- Processing, Processing is a flexible software sketchbook and a language for learning how to code.
- wpDataTables Lite,WordPress Tables & Table Charts Plugin
- Candela, charting tool
- Gephim Gephi is the leading visualization and exploration software for all kinds of graphs and networks. Gephi is open-source and free.
- Polymaps, Polymaps is a free JavaScript library for making dynamic, interactive maps in modern web browsers.
- D3.js, D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.
- Highcharts, We make it easy for developers to create charts for web and mobile platforms. For Javascript, Angular, React, VueJS, iOS, R, .NET, Python, and more.
- Recharts,A composable charting library built on React components
- Flexmonster, A pivot table component for web reporting; The most powerful JavaScript tool for visualizing your business data
- Chartkick, Create beautiful JavaScript charts with one line of Ruby
- Syncfusion JavaScript Charts, JavaScript Charts - Rich & Animated HTML5 Graphs with Real-Time Data
New Attributes for Posters:
- PosterTemplate
- PosterURL
- PosterCSS
- PosterLabels
- PosterSettings
- PosterX
- PosterY
- PosterZoom
- ScreenHeight
- ScreenWidth
Reference
- How to use GPT3 API with Curl
- Tools for thought
- Tinderbox Backstagee
- YAGNI principle
- aTBRef Action Code
Please comment
Please help with the development of future sessions by answering the three questions below.
- What were your top 2~3 key takeaways from this lesson?
- What do you want to learn next? Learn more about?
- What exercises would help reinforce your learning?