Hinzufügen eines Tool-Icons#

Ein Tool-Icon dient als grafische Darstellung Ihres Tools in der Benutzeroberfläche (UI). Befolgen Sie diese Anleitung, um ein benutzerdefiniertes Tool-Icon beim Entwickeln Ihres eigenen Tool-Pakets hinzuzufügen.

Das Hinzufügen eines benutzerdefinierten Tool-Icons ist optional. Wenn Sie keines bereitstellen, verwendet das System ein Standard-Icon.

Voraussetzungen#

Bitte stellen Sie sicher, dass Ihr Prompt Flow für VS Code auf Version 1.4.2 oder höher aktualisiert ist.
Erstellen Sie ein Tool-Paket wie in Tool-Paket erstellen und verwenden beschrieben.
Bereiten Sie ein benutzerdefiniertes Icon-Bild vor, das diese Anforderungen erfüllt
- Verwenden Sie das Format PNG, JPG oder BMP.
- 16x16 Pixel, um Verzerrungen beim Ändern der Größe zu vermeiden.
- Vermeiden Sie komplexe Bilder mit vielen Details oder Kontrasten, da diese möglicherweise nicht gut skaliert werden.
Siehe dieses Beispiel als Referenz.
Abhängigkeiten installieren, um Icon-Daten-URIs zu generieren
```
pip install pillow
```

Tool-Icon mit dem Parameter icon hinzufügen#

Führen Sie den folgenden Befehl in Ihrem Tool-Projektverzeichnis aus, um Ihre Tool-YAML automatisch zu generieren. Verwenden Sie den Parameter -i oder –icon, um ein benutzerdefiniertes Tool-Icon hinzuzufügen.

python <promptflow github repo>\scripts\tool\generate_package_tool_meta.py -m <tool_module> -o <tool_yaml_path> -i <tool-icon-path>

Hier verwenden wir ein bestehendes Tool-Projekt als Beispiel.

cd D:\proj\github\promptflow\examples\tools\tool-package-quickstart

python D:\proj\github\promptflow\scripts\tool\generate_package_tool_meta.py -m my_tool_package.tools.my_tool_1 -o my_tool_package\yamls\my_tool_1.yaml -i my_tool_package\icons\custom-tool-icon.png

In der automatisch generierten Tool-YAML-Datei wird der benutzerdefinierte Tool-Icon-Daten-URI im Feld icon hinzugefügt.

my_tool_package.tools.my_tool_1.my_tool:
  function: my_tool
  icon: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACR0lEQVR4nKWS3UuTcRTHP79nm9ujM+fccqFGI5viRRpjJgkJ3hiCENVN/QMWdBHUVRdBNwX9ARHd2FVEWFLRjaS9XPmSC/EFTNOWc3Pi48y9PHNzz68L7UXTCvreHM65+PA953uElFLyHzLvHMwsJrnzfJqFeAan3cKV9mr8XseeAOXX5vqjSS53jdF+tIz1nIFAMDCzwpvJ5b87+LSYYHw+gcWkEAwluXnOR2Q1R+9YjJ7BKJG4zoXmqr0ddL3+QnV5EeUOK821LsJammcjEeZiafJScrd3bm8H6zkDd4mVztZKAK49/Mj8is4Z/35GPq9R5VJ5GYztDtB1HT1vovGQSiqVAqDugI3I6jpP3i9x9VQVfu8+1N/OvbWCqqqoBSa6h1fQNA1N0xiYTWJSBCZF8HgwSjQapbRQ2RUg5NYj3O6ZochmYkFL03S4mImIzjFvCf2xS5gtCRYXWvBUvKXjyEVeTN/DXuDgxsnuzSMK4HTAw1Q0hZba4NXEKp0tbpq9VkxCwTAETrsVwxBIBIYhMPI7YqyrtONQzSznJXrO4H5/GJ9LUGg0YFYydJxoYnwpj1s9SEN5KzZz4fYYAW6dr+VsowdFgamlPE/Hs8SzQZYzg0S+zjIc6iOWDDEc6uND+N12B9/VVu+mrd79o38wFCCdTeBSK6hxBii1eahxBlAtRbsDdmoiHGRNj1NZ7GM0NISvzM9oaIhiqwOO/wMgl4FsRpLf2KxGXpLNSLLInzH+CWBIA6RECIGUEiEUpDRACBSh8A3pXfGWdXfMgAAAAABJRU5ErkJggg==
  inputs:
    connection:
      type:
      - CustomConnection
    input_text:
      type:
      - string
  module: my_tool_package.tools.my_tool_1
  name: my_tool
  type: python

Tool-Icon in der VS Code-Erweiterung überprüfen#

Befolgen Sie die Schritte, um Ihr Tool aus der VS Code-Erweiterung zu verwenden. Ihr Tool wird mit dem benutzerdefinierten Icon angezeigt.

FAQ#

Kann ich das Tool-Icon-Bild vor dem Hinzufügen zu einem Tool in der Vorschau anzeigen?#

Ja, Sie können den folgenden Befehl im Stammverzeichnis ausführen, um einen Daten-URI für Ihr benutzerdefiniertes Tool-Icon zu generieren. Stellen Sie sicher, dass die Ausgabedatei die Erweiterung .html hat.

python <path-to-scripts>\tool\convert_image_to_data_url.py --image-path <image_input_path> -o <html_output_path>

Zum Beispiel

python D:\proj\github\promptflow\scripts\tool\convert_image_to_data_url.py --image-path D:\proj\github\promptflow\examples\tools\tool-package-quickstart\my_tool_package\icons\custom-tool-icon.png -o output.html

Der Inhalt von output.html sieht wie folgt aus. Öffnen Sie ihn in einem Webbrowser, um das Icon in der Vorschau anzuzeigen.

<html>
<body>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACR0lEQVR4nKWS3UuTcRTHP79nm9ujM+fccqFGI5viRRpjJgkJ3hiCENVN/QMWdBHUVRdBNwX9ARHd2FVEWFLRjaS9XPmSC/EFTNOWc3Pi48y9PHNzz68L7UXTCvreHM65+PA953uElFLyHzLvHMwsJrnzfJqFeAan3cKV9mr8XseeAOXX5vqjSS53jdF+tIz1nIFAMDCzwpvJ5b87+LSYYHw+gcWkEAwluXnOR2Q1R+9YjJ7BKJG4zoXmqr0ddL3+QnV5EeUOK821LsJammcjEeZiafJScrd3bm8H6zkDd4mVztZKAK49/Mj8is4Z/35GPq9R5VJ5GYztDtB1HT1vovGQSiqVAqDugI3I6jpP3i9x9VQVfu8+1N/OvbWCqqqoBSa6h1fQNA1N0xiYTWJSBCZF8HgwSjQapbRQ2RUg5NYj3O6ZochmYkFL03S4mImIzjFvCf2xS5gtCRYXWvBUvKXjyEVeTN/DXuDgxsnuzSMK4HTAw1Q0hZba4NXEKp0tbpq9VkxCwTAETrsVwxBIBIYhMPI7YqyrtONQzSznJXrO4H5/GJ9LUGg0YFYydJxoYnwpj1s9SEN5KzZz4fYYAW6dr+VsowdFgamlPE/Hs8SzQZYzg0S+zjIc6iOWDDEc6uND+N12B9/VVu+mrd79o38wFCCdTeBSK6hxBii1eahxBlAtRbsDdmoiHGRNj1NZ7GM0NISvzM9oaIhiqwOO/wMgl4FsRpLf2KxGXpLNSLLInzH+CWBIA6RECIGUEiEUpDRACBSh8A3pXfGWdXfMgAAAAABJRU5ErkJggg==" alt="My Image">
</body>
</html>

Kann ich einem bestehenden Tool-Paket ein Tool-Icon hinzufügen?#

Ja, Sie können auf den Abschnitt Icon in der Vorschau anzeigen verweisen, um den Daten-URI zu generieren, und den Daten-URI manuell zur YAML-Datei des Tools hinzufügen.

Kann ich Tool-Icons für den Dunkel- und Hellmodus separat hinzufügen?#

Ja, Sie können die Tool-Icon-Daten-URIs manuell hinzufügen oder den folgenden Befehl in Ihrem Tool-Projektverzeichnis ausführen, um Ihre Tool-YAML automatisch zu generieren. Verwenden Sie –icon-light, um ein benutzerdefiniertes Tool-Icon für den Hellmodus hinzuzufügen, und verwenden Sie –icon-dark, um ein benutzerdefiniertes Tool-Icon für den Dunkelmodus hinzuzufügen.

python <promptflow github repo>\scripts\tool\generate_package_tool_meta.py -m <tool_module> -o <tool_yaml_path> --icon-light <light-tool-icon-path> --icon-dark <dark-tool-icon-path>

Hier verwenden wir ein bestehendes Tool-Projekt als Beispiel.

cd D:\proj\github\promptflow\examples\tools\tool-package-quickstart

python D:\proj\github\promptflow\scripts\tool\generate_package_tool_meta.py -m my_tool_package.tools.my_tool_1 -o my_tool_package\yamls\my_tool_1.yaml --icon-light my_tool_package\icons\custom-tool-icon-light.png --icon-dark my_tool_package\icons\custom-tool-icon-dark.png

In der automatisch generierten Tool-YAML-Datei werden die Daten-URIs für das helle und dunkle Tool-Icon im Feld icon hinzugefügt.

my_tool_package.tools.my_tool_1.my_tool:
  function: my_tool
  icon:
    dark: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAB00lEQVR4nI1SO2iTURT+7iNNb16a+Cg6iJWqRKwVRIrWV6GVUkrFdqiVShBaxIIi4iY4iouDoy4ODkKn4uQkDs5FfEzFYjEtJYQo5P/z35j/3uNw7Z80iHqHC/ec8z3OuQeMMcYYAHenU8n84YMAABw7mo93dEQpAIyBAyAiF1Kq8/Wrl5fHR1x6tjC9uPBcSrlZD4BxIgIgBCei+bnC6cGxSuWHEEIIUa58H7l0dWZqwlqSUjhq7oDWEoAL584Y6ymljDHGmM543BhvaPAsAKLfEjIyB6BeryPw796+EWidUInr16b5z6rWAYCmKXeEEADGRy+SLgXlFfLWbbWoyytULZ4f6Hee2yDgnAG4OVsoff20try08eX92vLSzJVJAJw3q7dISSnDMFx48UypeCa97cPHz7fu3Y/FYo1Go8nbCiAiIUStVus/eaKvN691IAQnsltI24wZY9Kp1Ju373K5bDKZNMa6gf5ZIWrG9/0g0K3W/wYIw3Dvnq6dO7KNMPwvgOf5x3uPHOrp9n3/HwBrLYCu3bv6Tg0PjU0d2L8PAEWfDKCtac6YIVrfKN2Zn8tkUqvfigBaR88Ya66uezMgl93+9Mmjxw8fJBIqWv7NAvwCHeuq7gEPU/QAAAAASUVORK5CYII=
    light: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAB2UlEQVR4nH1SO2hUQRQ9c18K33u72cXs7jOL8UeQCCJoJaIgKAiCWKilaGNlYREFDRGNjayVWKiFFmITECFKJKIokQRRsDFENoooUchHU5qdWZ2512KymxcNOcUwc5nDuefeA2FhZpGFU0S0Mf5S0zpdF2FhISgopUREKfXj59yhoycmPn4GAKDncuXa9VtKKWYGACgowHOdc9a6g0eOA7mx8apzzlp76vRZoGXw6XMRsdb6nwSAmYnoQ3Xi5fBIdk2SiSMiCoKgNZslteruvX4ASikvSwAEAGDqdYhAXO+VypevkwODQ4+HnlGcq2mDNLwtZq5pvWP3AYRJ0Lq2uG5rWNgYFjaBVt+8c19E/jRaWvQgImPj1e279ufaN8elzly5K1/u6r7QZ51zrjmoBqHJ+TU/39ax5cy5i53bdnb39KXtLpr28OMLgiCfz78YHpmemi0W2piZWdIWaMmDCIDWet/ePUlS0toQUWM8yxG8jrVuw/qOTBw19rUiQUQoCGZm50z9txf8By3/K0Rh+PDRk8lv3+MoWklBBACmpmdKxcKn96O3b1SqC6FSyxOUgohk4pjZ9T8YeDX6ptye+PoSpNIrfkGv3747fOzk+UtXjTE+BM14M8tfl7BQR9VzUXEAAAAASUVORK5CYII=
  inputs:
    connection:
      type:
      - CustomConnection
    input_text:
      type:
      - string
  module: my_tool_package.tools.my_tool_1
  name: my_tool
  type: python

Hinweis: Sowohl helle als auch dunkle Icons sind optional. Wenn Sie entweder ein helles oder ein dunkles Icon festlegen, wird es in seinem jeweiligen Modus verwendet, und das System-Standard-Icon wird im anderen Modus verwendet.