[gradio]markdownでプロンプト開発したい

# 「promptStudioWithMarkdown」でAIプロンプトの可能性を最大限に活用

チャットベースのインターフェースでは、ご利用の際にいくつか不便さを感じられることもあるかと思います。そこで、プロンプトの作成をよりスムーズにするために、「promptStudioWithMarkdown」というプロンプト開発環境ツールを開発しました。このツールを使用することで、markdown記法を活用して効率的かつ柔軟にプロンプトの開発を行うことができるようになります。AIとの対話をもっとダイナミックで創造的なものにするお手伝いをさせていただければ幸いです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486826/cb5a6708-206b-11e0-aa64-bbcf0d5e32eb.png)

## 解決すべき課題
1. **非効率:** プロンプトを変更しては、送信ボタンをなんども押している
2. **面倒:** プロンプトを記述しているとき、エディタみたいに、リストは最初の文字を入力補完してほしい
3. **コピペの手間 :** markdown対応のエディタから直接GPTとして実行してほしい

## 使用技術の章

「promptStudioWithMarkdown」の開発には、最先端のテクノロジーが活用されています。この章では、その核となる三つの技術、Gradioライブラリ、OpenAIライブラリ、Hugging Face Spacesについて詳しく説明します。

### Gradioライブラリ
Gradioは、機械学習モデルをインタラクティブなウェブアプリケーションに変換するためのライブラリです。このツールを使用すると、開発者はコーディングの知識が少なくても、手軽にウェブベースのデモを作成できます。


### OpenAIライブラリ
OpenAIライブラリは、強力なAIモデル、特に自然言語処理モデルのアクセスを提供するAPIです。このAPIを通じて、開発者は様々な種類のAI機能を自分のアプリケーションに統合できます。

### Hugging Face Spaces
Hugging Face Spacesは、機械学習モデルをウェブアプリケーションとして展開するプラットフォームです。GradioやStreamlitなどのフレームワークをサポートしており、機械学習コミュニティ内で広く使用されています。

これらの技術を組み合わせることで、「promptStudioWithMarkdown」は、AIプロンプトの開発とテストを容易にし、ユーザーに直感的な体験を提供します。それぞれの技術が持つ強みを生かし、

高度なカスタマイズ性とユーザーフレンドリーなインターフェースを実現しています。
## 特徴

### markdownでカスタマイズ可能なプロンプト入力
このツールでは、markdownを使用してプロンプトを自由に編集できます。これにより、ユーザーはプロンプトの精度を高め、AIとの対話を最適化することが可能です。複雑なフォーマットや特定のデザイン要素を簡単に組み込むことができます。
```python
import gradio as gr
codeInput = gr.Code(language='markdown',label='systemPrompt',value="")
```

### ストリーミングによるリアルタイム応答
入力されたプロンプトに基づいて、リアルタイムでAIの応答がストリーミングされます。これにより、プロンプトの影響を即座に確認し、対話をより流動的に進めることができます。
`demo.queue()`でストリーミング応答が可能です。
```python
from openai import OpenAI
def executeGptCommon(apikey, model, maxtokens, temperature, systemPrompt,userPrompt=None, assistantMessage=None):
    try:
        if not apikey: 
            raise gr.Error('API KEY is empty. Check out your OPENAI API KEY') 
        client = OpenAI(api_key=apikey)
        messages = [
            {"role": "system", "content": systemPrompt}
        ]
        if userPrompt is not None:
            messages.append({"role": "user", "content": userPrompt}) 
        if assistantMessage is not None:
            messages.append({"role": "assistant", "content": assistantMessage})
        completion = client.chat.completions.create(
            model=model,
            stream=True,
            max_tokens=int(maxtokens),
            temperature=temperature,
            messages=messages
        )
        text = "" if assistantMessage is None else assistantMessage
        for chunk in completion:
            if flagStop.value.flag == True:
                flagStop.value.down()
                break
            if chunk.choices[0].finish_reason == 'stop':
                break
            next = chunk.choices[0].delta.content
            if next is None:
                continue
            text += next
            yield text
    except Exception as e:
        gr.Info(e.message)
    
```

### プロンプトの検証と最適化
異なるプロンプトを試し、最適な結果を得るための調整を行うことができます。これにより、AIを用いた対話の効率と効果が大幅に向上します。

### 直感的で使いやすいインターフェース
OPENAI APIキーを入力するだけで、誰でも簡単にAIの力を利用できます。直感的な操作で、プロンプトの開発とテストが容易になります。

### カスタマイズ可能な設定
モデル選択、最大トークン数、temperature設定など、ユーザーのニーズに合わせて設定をカスタマイズできます。これにより、より正確でクリエイティブな応答を得ることができます。

### 履歴のログ保存機能
セッションの履歴はログとして保存され、参照できます。これにより、以前の応答をレビューし、学習プロセスを強化することができます。
### gradioでクリップボードにコピーしたい
gradio ではpythonライブラリのクリップボート操作ライブラリがうまくつかませんでした。
おそらく、バックエンドでうごくため、フロントエンド操作（ブラウザ）はできない？
そこで、gradioのjavascriptを指定したらうまくいきました。
```python
import gradio as gr
btnCopy = gr.Button()
tbOutput = gr.Textbox('Hello World!')
btnCopy.click(lambda x: gr.Info('copied!'), tbOutput, [], js='(str) => navigator.clipboard.writeText(str)')
```
## 今すぐ試してみましょう！

https://huggingface.co/spaces/tregu0458/promptStudioWithMarkdown


「promptStudioWithMarkdown」は、創造性を最大限に引き出し、AIとの対話を新たな次元に引き上げるツールです。今すぐアクセスして、その可能性を体験してください！

---

The space **DOES NOT** store your prompt, your Openai API KEY.

**@tregu0458 © 2023 All Rights Reserved.**