paint-brush
ついに! AImarkdown スクリプトを使用して ChatGPT 出力を色付けできます: その方法は次のとおりです@robmccormack
742 測定値
742 測定値

ついに! AImarkdown スクリプトを使用して ChatGPT 出力を色付けできます: その方法は次のとおりです

Rob McCormack5m2024/03/20
Read on Terminal Reader

長すぎる; 読むには

ChatGPT の会話をより視覚的に魅力的なものにしたいと考えていますか?このガイドではその方法を説明します。シンプルなツールが、プレーンな ChatGPT 応答を活気のある、フォーマットされた応答にどのように変換できるかをご覧ください。
featured image - ついに! AImarkdown スクリプトを使用して ChatGPT 出力を色付けできます: その方法は次のとおりです
Rob McCormack HackerNoon profile picture

ChatGPT4が必要です。

AImarkdown を利用

導入

ChatGPT の会話をより視覚的に魅力的なものにしたいと考えていますか?このガイドではその方法を説明します。シンプルなツールが、プレーンな ChatGPT 応答を活気のある、フォーマットされた応答にどのように変換できるかをご覧ください。


ChatGPT を使用して情報を目立たせたり、アプリ開発を強化したいと考えている人に最適です。


ChatGPT には Markdown とカラーのネイティブ サポートがありませんが、回避策はあります。 ChatGPT アプリを作成したり、ChatGPT Builder の出力を使用したりするには、多大な労力と長年のソフトウェア開発経験が必要であると多くの人が信じています。


AImarkdown スクリプトはすべてを変え、インタラクションの視覚的な魅力を簡単に強化できることを証明します。


カラフルでフォーマットされた ChatGPT 応答を可能にする追加のツールをいくつか見てみましょう。プロジェクトを強化したいと考えている開発者であっても、ChatGPT エクスペリエンスを充実させたいと考えている一般ユーザーであっても、これらのツールはアクセスしやすく、簡単に使用できるように設計されています。

使用したツール

  1. AImarkdown スクリプト: 人間が理解できる YAML および Markdown による出力と対話を制御します。


  2. Placehold : シンプル、高速、無料の画像プレースホルダー サービス。


  3. Fakeimg : URL を含む画像を生成します。サイズ、色、テキストも選択します。


  4. Shield.io : 簡潔で一貫性のある読みやすい画像バッジを作成します。

スクリーンショット

iPhoneのスクリーンショット

1. AImarkdown スクリプト

AImarkdown スクリプトは、ChatGPT のような会話型 AI プラットフォームとの動的な対話を作成するための多用途言語です。これにより、ユーザーは対話をスクリプト化し、会話フローを制御し、AI の動作と応答をカスタマイズできるようになります。


プログラマにとっては、スクリプト言語の柔軟性が得られます。プログラマー以外にとっても、AI エクスペリエンスをカスタマイズおよび制御するためのユーザーフレンドリーな方法を提供します。ロブ・マコーマックによる開発- https://aimarkdown.org


ノート:

  1. AImarkdown スクリプトは、ChatGPT 4 または ChatGPT Builder セッションに簡単に貼り付けることができ、AI は指示に従って動作します。 ChatGPT Builder も同様です。


  2. iPhoneアプリでは一部の画像が表示されない場合がございます。ただし、デスクトップおよびモバイルのブラウザでは画像が表示されます。

2. プレースホールド

ドキュメンテーション


コード

https://cdn.hackernoon.com/images/k2s7svgbhkVZ5UqFBHR7QLwURtJ2-2024-03-20T20:45:16.936Z-d7kvk3alfpb2zmrgr4fgv9f9


マークダウン形式の画像

画像

3. フェイクイメージ

FakeImg はフォントと透明度をサポートしています。


ドキュメンテーション


コード

![image](https://fakeimg.pl/300x50/ff2233,60/f0ff00,128?text=Main%20Title&font=lobster&font_size=24)


マークダウン形式の画像

画像

パラメータの説明:

FakeImg のドキュメントは少しわかりにくいため、ここで使用されるパラメーターについて簡潔に説明します。


![image](https://fakeimg.pl/300x100/ff0000,128/0000ff,128?text=Rob%20McCormack&font=lobster&font_size=24)

  • 300x100 : 生成される画像のサイズを指定します。この場合、画像の幅は 300 ピクセル、高さは 100 ピクセルです。


  • ff0000,128 : 背景色とその不透明度を定義します。 ff0000は赤の 16 進コードで、 128不透明度を 50% に設定します (0 ~ 255 のスケールで、255 は完全に不透明です)。


  • 0000ff,128 : テキストの色とその不透明度を設定します。 0000ff青の 16 進コードで、 128テキストの不透明度が 50% であることを示します。


  • text=Rob%20McCormack : このパラメータは、画像上に表示されるテキストを指定します。 %20は URL エンコードされたスペースであるため、画像上のテキストは「Rob McCormack」になります。


  • font=lobster : テキストに使用されるフォントを決定します。この場合、「lobster」が選択されたフォントです。


  • font_size=24 : フォントのサイズを設定します。テキストは 24 ピクセルのフォント サイズを使用して表示されます。

4.Shields.io

ドキュメンテーション


コードメモ: 画像にはハイパーリンクを付けることもできます。

 https://placehold.co/300x40/ff0000/FFFFFF/png?text=Hello+World&font=roboto


マークダウン形式のバッジ

![image](https://cdn.hackernoon.com/images/k2s7svgbhkVZ5UqFBHR7QLwURtJ2-2024-03-20T20:45:19.648Z-ov4b34ogcyq4ggkcglua8m3z) 

画像

AImarkdown スクリプトのインストールに関する注意事項

  1. ChatGPT 4 : コードをコピーして ChatGPT に貼り付けます。


  2. ChatGPT ビルダー: Configuration|Instructionsに、「 AI は次の指示に従います: 」を追加し、コード全体をコピーして貼り付けます。


  3. API アクションを備えた ChatGPT ビルダー:アクションの設定と API 呼び出しの知識が必要です。

結論

AImarkdown スクリプトを ChatGPT および ChatGPT Builder アプリに統合することで、新しいレベルのカスタマイズが可能になります。色、書式設定、画像を追加すると、ユーザー エクスペリエンスが変わり、可読性が向上し、情報が理解しやすくなります。


これにより、さらに魅力的で有益なインタラクションへの扉が開かれます。

次のステップ

  • 実験:プロジェクトの機能を拡張するために、さらに多くのイベントと複雑なトリガーを追加してみてください。


  • AImarkdown コミュニティ: AImarkdown コミュニティに参加してアイデアを共有し、他の人から学びましょう。 Web サイトhttps://aimarkdown.orgにアクセスしてください。


  • プロジェクトを共有する:共有可能なリンクを使用して、ChatGPT セッションの作業バージョンを共有することを検討してください。これにより、他の人が直接試すことができるようになります。

公開された記事: さらに読む


AImarkdown スクリプト コード

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: ![](https://placehold.co/600x100/222222/0093ff?font=playfair-display&text=History%20of%20Canada) # 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 ![](https://cdn.hackernoon.com/images/k2s7svgbhkVZ5UqFBHR7QLwURtJ2-2024-03-20T20:45:20.021Z-pmglc34kqqac5o33ves7ace8) [topic_title_image] - *[topic_title] by [author]* ![](https://img.shields.io/badge/A%20brief%20look%20at%20Canada's%20beginnings.-0d6efd) [topic_intro] --- ![](https://cdn.hackernoon.com/images/k2s7svgbhkVZ5UqFBHR7QLwURtJ2-2024-03-20T20:45:19.710Z-nipn5oo8qst5ch7ffyomrg42) --- ![](https://cdn.hackernoon.com/images/k2s7svgbhkVZ5UqFBHR7QLwURtJ2-2024-03-20T20:45:20.937Z-sqm9ahig4nas8ihhz3wbate7) |![](https://cdn.hackernoon.com/images/k2s7svgbhkVZ5UqFBHR7QLwURtJ2-2024-03-20T20:45:19.562Z-e1qh17g63ncn7r0tgdzz9edc) | ![](https://cdn.hackernoon.com/images/k2s7svgbhkVZ5UqFBHR7QLwURtJ2-2024-03-20T20:45:19.443Z-e4lct363fq96kx9d5gc074h3) | ![](https://cdn.hackernoon.com/images/k2s7svgbhkVZ5UqFBHR7QLwURtJ2-2024-03-20T20:45:19.320Z-zeuamkaopcqw5emdgui26bkq) | | :--: | :--: | :--: | | ![](https://cdn.hackernoon.com/images/k2s7svgbhkVZ5UqFBHR7QLwURtJ2-2024-03-20T20:45:17.766Z-diqzi1ckvbl7a93laju812or) | ![](https://cdn.hackernoon.com/images/k2s7svgbhkVZ5UqFBHR7QLwURtJ2-2024-03-20T20:45:17.714Z-r83k5dd8z2k39jm89ekiz4vw) | ![](https://cdn.hackernoon.com/images/k2s7svgbhkVZ5UqFBHR7QLwURtJ2-2024-03-20T20:45:17.626Z-r56andnccflarfr49k9va00m) | > Click to change color and animate Robot. > [![](https://cdn.hackernoon.com/images/k2s7svgbhkVZ5UqFBHR7QLwURtJ2-2024-03-20T20:45:17.549Z-dkqrtjrf6sk5babkmxgnxdxg)](https://aimarkdown.org/i/robot-animated.gif) ### Lorem Ipsum [lorem_ipsum_text] --- ![](https://img.shields.io/badge/%F0%9F%8D%81Made%20in%20Canada%20-grey?style=flat-square)![Powered by AImarkdown](https://cdn.hackernoon.com/images/k2s7svgbhkVZ5UqFBHR7QLwURtJ2-2024-03-20T20:45:17.421Z-bwylfan7yqcdwvxtnz1a6mqr) :::

ここでも公開されています