ChatGPT 4 is required.
Introduction
Looking to make your ChatGPT conversations more visually engaging? This guide shows you how. Discover how simple tools can transform plain ChatGPT replies into vibrant, formatted responses. Perfect for anyone looking to make information standout or enhance app development with ChatGPT.
Despite ChatGPT's lack of native support for Markdown and color, there's a workaround. Many believe that creating ChatGPT apps or using ChatGPT Builder outputs requires a great deal of effort and years of software development experience. AImarkdown Script changes all that, proving it's possible to easily enhance the visual appeal of your interactions.
Let's explore some extra tools that make colorful, formatted ChatGPT responses possible. Whether you're a developer looking to enhance your projects or a casual user seeking to enrich your ChatGPT experience, these tools are designed to be accessible and straightforward to use.
Tools Used
- AImarkdown Script: Control output and interactions with human-understandable YAML and Markdown
- Placehold: A simple, fast and free image placeholder service
- Fakeimg: Generates images with an URL. Choose the size, the colors, even the text
- Shield.io: Creates concise, consistent, and legible image badges
Screenshot
1. AImarkdown Script
AImarkdown Script is a versatile language for creating dynamic interactions with conversational AI platforms like ChatGPT. It empowers users to script interactions, control conversation flow, and customize AI behavior and responses. For programmers, it offers the flexibility of a scripting language; for non-programmers, it provides a user-friendly way to customize and control AI experiences. Developed by Rob McCormack - https://aimarkdown.org
Notes:
- AImarkdown Script can be simply pasted into any ChatGPT 4 or ChatGPT Builder session, and AI will follow the instructions and behave according. Same with ChatGPT Builder.
- Some images may not be displayed on the iPhone app. But in a browser on desktop and mobile images will be displayed.
2. Placehold
Documentation
Code
https://placehold.co/300x40/ff0000/FFFFFF/png?text=Hello+World&font=roboto
Markdown formatted image
3. FakeImg
FakeImg supports fonts and transparencies
Documentation
Code
Markdown formatted image
Parameters Explained:
The documentation for FakeImg is a little hard to follow, so here is a concise explanation of parameters used.
-
300x100: Specifies the dimensions of the generated image. In this case, the image is 300 pixels wide and 100 pixels tall. -
ff0000,128: Defines the background color and its opacity.ff0000is a hex code for the color red, and128sets the opacity to 50% (on a scale of 0 to 255, where 255 is fully opaque). -
0000ff,128: Sets the text color and its opacity.0000ffis the hex code for blue, and128indicates the text opacity at 50%. -
text=Rob%20McCormack: This parameter specifies the text to be displayed on the image.%20is a URL-encoded space, so the text on the image will be "Rob McCormack". -
font=lobster: Determines the font used for the text. In this case, "lobster" is the chosen font. -
font_size=24: Sets the size of the font. The text will be displayed using a font size of 24 pixels.
4. Shields.io
Documentation
Code
Note: Images can also be hyperlinked.
https://placehold.co/300x40/ff0000/FFFFFF/png?text=Hello+World&font=roboto
Markdown formatted badge
AImarkdown Script Installation Notes
- ✅ ChatGPT 4: Copy and paste code into ChatGPT.
- ✅ ChatGPT Builder: In
Configuration|Instructions, add "AI to follow these instructions:", then copy and paste the entire code. - ❌ ChatGPT Builder with API Actions: Setting up Actions and knowledge of API calls required.
Conclusion
By integrating AImarkdown Script into your ChatGPT and ChatGPT Builder apps, you've unlocked a new level of customization. Adding color, formatting, and images transforms the user experience, improving readability and making information easier to understand. This opens the door to even more engaging and informative interactions!
Next Steps
- Experiment: Explore adding more events and complex triggers to expand your project's capabilities.
- AImarkdown Community: Join the AImarkdown community to share ideas and learn from others. Visit the website at https://aimarkdown.org.
- Share Your Project: Consider sharing a working version of your ChatGPT session using a sharable link. This would allow others to try it directly!
Published Articles: Further Reading
- Code Highlighter Responder - ChatGPT's Missing Feature
- Unleashing Python’s Power within ChatGPT - Part One
- Build a ChatGPT 4 Blackjack Game with AI Coaching (49 Lines of Code)
- ResponseDial: Take Control of ChatGPT Responses
- Instantly Add a "Date Stamp" Feature That ChatGPT Forgot
- Lightning-Fast Python in ChatGPT with AImarkdown Script
- Finally! Colorize ChatGPT Output with AImarkdown Script
AImarkdown Script Code
title: "Colorizer for ChatGPT"
author: Rob McCormack
# AI To Follow These Instructions and Guidance (version 2024.02.03)
# Overview: Example of using color with AImarkdown Script
# Document Structure:
# - AImarkdown language is a combination of YAML and Markdown. https://aimarkdown.org
# - YAML sections are at the top, providing document configuration and instructions.
# - Comments (`#`) in YAML guide AI's approach to the document.
# - Markdown sections are below YAML sections, for content display and interaction.
# Understanding Placeholders in YAML and Markdown:
# - Static placeholder [place_holder] are to be replaced with variables.
# Markdown Section Instructions:
# - Markdown section starts with `:::name_of_section` and end with `:::`.
# - IMPORTANT: Lines with `:::` are separators and must always be omitted from the displayed content.
# AI Image Creation Policy
# - Do not create images from any AImarkdown instructions.
# - Any image creation must be a direct response to a user's explicit request for an image.
# Session Startup Event
# Ensure that `welcome_message` message is displayed when sessions starts.
# Display `welcome_message` message without additional elaboration.
session_startup:
action: display_welcome_message_and_trigger_color
welcome_message: |
Welcome to: **[title]**
Use `/color` to try this out.
topic_title: "History of Canada"
topic_title_image: 
# AI to generate an introduction to a topic
topic_intro: AI to generate in point form, 3 short points about history of Canada.
# Generate some random text for display in Markdown section
lorem_ipsum_text: AI to generate 1 paragraph, about 80 words of Lorem ipsum text.
# Display `color-document` Markdown section
# AI to not elaborate or explain - just display `color-document`
display_color-document:
- Directly display 'color-document' section without adding any AI-generated introduction, explanation, or commentary.
- Display all images in `[alt text](image_url)` Markdown syntax.
- Replace all placeholders with values.
- trigger: /color
# Markdown section `color-document`.
:::color-document
[topic_title_image]
- *[topic_title] by [author]*
[topic_intro]
---
---
| |  |  |
| :--: | :--: | :--: |
|  |  |  |
> Click to change color and animate Robot.
> [](https://aimarkdown.org/i/robot-animated.gif)
### Lorem Ipsum
[lorem_ipsum_text]
---
:::
Top comments (0)