FunctionEditor.svelte 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393
  1. <script>
  2. import { getContext, createEventDispatcher, onMount } from 'svelte';
  3. import { goto } from '$app/navigation';
  4. const dispatch = createEventDispatcher();
  5. const i18n = getContext('i18n');
  6. import CodeEditor from '$lib/components/common/CodeEditor.svelte';
  7. import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
  8. let formElement = null;
  9. let loading = false;
  10. let showConfirm = false;
  11. export let edit = false;
  12. export let clone = false;
  13. export let id = '';
  14. export let name = '';
  15. export let meta = {
  16. description: ''
  17. };
  18. export let content = '';
  19. $: if (name && !edit && !clone) {
  20. id = name.replace(/\s+/g, '_').toLowerCase();
  21. }
  22. let codeEditor;
  23. let boilerplate = `"""
  24. title: Example Filter
  25. author: open-webui
  26. author_url: https://github.com/open-webui
  27. funding_url: https://github.com/open-webui
  28. version: 0.1
  29. """
  30. from pydantic import BaseModel, Field
  31. from typing import Optional
  32. class Filter:
  33. class Valves(BaseModel):
  34. priority: int = Field(
  35. default=0, description="Priority level for the filter operations."
  36. )
  37. max_turns: int = Field(
  38. default=8, description="Maximum allowable conversation turns for a user."
  39. )
  40. pass
  41. class UserValves(BaseModel):
  42. max_turns: int = Field(
  43. default=4, description="Maximum allowable conversation turns for a user."
  44. )
  45. pass
  46. def __init__(self):
  47. # Indicates custom file handling logic. This flag helps disengage default routines in favor of custom
  48. # implementations, informing the WebUI to defer file-related operations to designated methods within this class.
  49. # Alternatively, you can remove the files directly from the body in from the inlet hook
  50. # self.file_handler = True
  51. # Initialize 'valves' with specific configurations. Using 'Valves' instance helps encapsulate settings,
  52. # which ensures settings are managed cohesively and not confused with operational flags like 'file_handler'.
  53. self.valves = self.Valves()
  54. pass
  55. def inlet(self, body: dict, __user__: Optional[dict] = None) -> dict:
  56. # Modify the request body or validate it before processing by the chat completion API.
  57. # This function is the pre-processor for the API where various checks on the input can be performed.
  58. # It can also modify the request before sending it to the API.
  59. print(f"inlet:{__name__}")
  60. print(f"inlet:body:{body}")
  61. print(f"inlet:user:{__user__}")
  62. if __user__.get("role", "admin") in ["user", "admin"]:
  63. messages = body.get("messages", [])
  64. max_turns = min(__user__["valves"].max_turns, self.valves.max_turns)
  65. if len(messages) > max_turns:
  66. raise Exception(
  67. f"Conversation turn limit exceeded. Max turns: {max_turns}"
  68. )
  69. return body
  70. def outlet(self, body: dict, __user__: Optional[dict] = None) -> dict:
  71. # Modify or analyze the response body after processing by the API.
  72. # This function is the post-processor for the API, which can be used to modify the response
  73. # or perform additional checks and analytics.
  74. print(f"outlet:{__name__}")
  75. print(f"outlet:body:{body}")
  76. print(f"outlet:user:{__user__}")
  77. return body
  78. `;
  79. const _boilerplate = `from pydantic import BaseModel
  80. from typing import Optional, Union, Generator, Iterator
  81. from utils.misc import get_last_user_message
  82. import os
  83. import requests
  84. # Filter Class: This class is designed to serve as a pre-processor and post-processor
  85. # for request and response modifications. It checks and transforms requests and responses
  86. # to ensure they meet specific criteria before further processing or returning to the user.
  87. class Filter:
  88. class Valves(BaseModel):
  89. max_turns: int = 4
  90. pass
  91. def __init__(self):
  92. # Indicates custom file handling logic. This flag helps disengage default routines in favor of custom
  93. # implementations, informing the WebUI to defer file-related operations to designated methods within this class.
  94. # Alternatively, you can remove the files directly from the body in from the inlet hook
  95. self.file_handler = True
  96. # Initialize 'valves' with specific configurations. Using 'Valves' instance helps encapsulate settings,
  97. # which ensures settings are managed cohesively and not confused with operational flags like 'file_handler'.
  98. self.valves = self.Valves(**{"max_turns": 2})
  99. pass
  100. def inlet(self, body: dict, user: Optional[dict] = None) -> dict:
  101. # Modify the request body or validate it before processing by the chat completion API.
  102. # This function is the pre-processor for the API where various checks on the input can be performed.
  103. # It can also modify the request before sending it to the API.
  104. print(f"inlet:{__name__}")
  105. print(f"inlet:body:{body}")
  106. print(f"inlet:user:{user}")
  107. if user.get("role", "admin") in ["user", "admin"]:
  108. messages = body.get("messages", [])
  109. if len(messages) > self.valves.max_turns:
  110. raise Exception(
  111. f"Conversation turn limit exceeded. Max turns: {self.valves.max_turns}"
  112. )
  113. return body
  114. def outlet(self, body: dict, user: Optional[dict] = None) -> dict:
  115. # Modify or analyze the response body after processing by the API.
  116. # This function is the post-processor for the API, which can be used to modify the response
  117. # or perform additional checks and analytics.
  118. print(f"outlet:{__name__}")
  119. print(f"outlet:body:{body}")
  120. print(f"outlet:user:{user}")
  121. messages = [
  122. {
  123. **message,
  124. "content": f"{message['content']} - @@Modified from Filter Outlet",
  125. }
  126. for message in body.get("messages", [])
  127. ]
  128. return {"messages": messages}
  129. # Pipe Class: This class functions as a customizable pipeline.
  130. # It can be adapted to work with any external or internal models,
  131. # making it versatile for various use cases outside of just OpenAI models.
  132. class Pipe:
  133. class Valves(BaseModel):
  134. OPENAI_API_BASE_URL: str = "https://api.openai.com/v1"
  135. OPENAI_API_KEY: str = "your-key"
  136. pass
  137. def __init__(self):
  138. self.type = "manifold"
  139. self.valves = self.Valves()
  140. self.pipes = self.get_openai_models()
  141. pass
  142. def get_openai_models(self):
  143. if self.valves.OPENAI_API_KEY:
  144. try:
  145. headers = {}
  146. headers["Authorization"] = f"Bearer {self.valves.OPENAI_API_KEY}"
  147. headers["Content-Type"] = "application/json"
  148. r = requests.get(
  149. f"{self.valves.OPENAI_API_BASE_URL}/models", headers=headers
  150. )
  151. models = r.json()
  152. return [
  153. {
  154. "id": model["id"],
  155. "name": model["name"] if "name" in model else model["id"],
  156. }
  157. for model in models["data"]
  158. if "gpt" in model["id"]
  159. ]
  160. except Exception as e:
  161. print(f"Error: {e}")
  162. return [
  163. {
  164. "id": "error",
  165. "name": "Could not fetch models from OpenAI, please update the API Key in the valves.",
  166. },
  167. ]
  168. else:
  169. return []
  170. def pipe(self, body: dict) -> Union[str, Generator, Iterator]:
  171. # This is where you can add your custom pipelines like RAG.
  172. print(f"pipe:{__name__}")
  173. if "user" in body:
  174. print(body["user"])
  175. del body["user"]
  176. headers = {}
  177. headers["Authorization"] = f"Bearer {self.valves.OPENAI_API_KEY}"
  178. headers["Content-Type"] = "application/json"
  179. model_id = body["model"][body["model"].find(".") + 1 :]
  180. payload = {**body, "model": model_id}
  181. print(payload)
  182. try:
  183. r = requests.post(
  184. url=f"{self.valves.OPENAI_API_BASE_URL}/chat/completions",
  185. json=payload,
  186. headers=headers,
  187. stream=True,
  188. )
  189. r.raise_for_status()
  190. if body["stream"]:
  191. return r.iter_lines()
  192. else:
  193. return r.json()
  194. except Exception as e:
  195. return f"Error: {e}"
  196. `;
  197. const saveHandler = async () => {
  198. loading = true;
  199. dispatch('save', {
  200. id,
  201. name,
  202. meta,
  203. content
  204. });
  205. };
  206. const submitHandler = async () => {
  207. if (codeEditor) {
  208. const res = await codeEditor.formatPythonCodeHandler();
  209. if (res) {
  210. console.log('Code formatted successfully');
  211. saveHandler();
  212. }
  213. }
  214. };
  215. </script>
  216. <div class=" flex flex-col justify-between w-full overflow-y-auto h-full">
  217. <div class="mx-auto w-full md:px-0 h-full">
  218. <form
  219. bind:this={formElement}
  220. class=" flex flex-col max-h-[100dvh] h-full"
  221. on:submit|preventDefault={() => {
  222. if (edit) {
  223. submitHandler();
  224. } else {
  225. showConfirm = true;
  226. }
  227. }}
  228. >
  229. <div class="mb-2.5">
  230. <button
  231. class="flex space-x-1"
  232. on:click={() => {
  233. goto('/workspace/functions');
  234. }}
  235. type="button"
  236. >
  237. <div class=" self-center">
  238. <svg
  239. xmlns="http://www.w3.org/2000/svg"
  240. viewBox="0 0 20 20"
  241. fill="currentColor"
  242. class="w-4 h-4"
  243. >
  244. <path
  245. fill-rule="evenodd"
  246. d="M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z"
  247. clip-rule="evenodd"
  248. />
  249. </svg>
  250. </div>
  251. <div class=" self-center font-medium text-sm">{$i18n.t('Back')}</div>
  252. </button>
  253. </div>
  254. <div class="flex flex-col flex-1 overflow-auto h-0 rounded-lg">
  255. <div class="w-full mb-2 flex flex-col gap-1.5">
  256. <div class="flex gap-2 w-full">
  257. <input
  258. class="w-full px-3 py-2 text-sm font-medium bg-gray-50 dark:bg-gray-850 dark:text-gray-200 rounded-lg outline-none"
  259. type="text"
  260. placeholder="Function Name (e.g. My Filter)"
  261. bind:value={name}
  262. required
  263. />
  264. <input
  265. class="w-full px-3 py-2 text-sm font-medium disabled:text-gray-300 dark:disabled:text-gray-700 bg-gray-50 dark:bg-gray-850 dark:text-gray-200 rounded-lg outline-none"
  266. type="text"
  267. placeholder="Function ID (e.g. my_filter)"
  268. bind:value={id}
  269. required
  270. disabled={edit}
  271. />
  272. </div>
  273. <input
  274. class="w-full px-3 py-2 text-sm font-medium bg-gray-50 dark:bg-gray-850 dark:text-gray-200 rounded-lg outline-none"
  275. type="text"
  276. placeholder="Function Description (e.g. A filter to remove profanity from text)"
  277. bind:value={meta.description}
  278. required
  279. />
  280. </div>
  281. <div class="mb-2 flex-1 overflow-auto h-0 rounded-lg">
  282. <CodeEditor
  283. bind:value={content}
  284. bind:this={codeEditor}
  285. {boilerplate}
  286. on:save={() => {
  287. if (formElement) {
  288. formElement.requestSubmit();
  289. }
  290. }}
  291. />
  292. </div>
  293. <div class="pb-3 flex justify-between">
  294. <div class="flex-1 pr-3">
  295. <div class="text-xs text-gray-500 line-clamp-2">
  296. <span class=" font-semibold dark:text-gray-200">Warning:</span> Functions allow
  297. arbitrary code execution <br />—
  298. <span class=" font-medium dark:text-gray-400"
  299. >don't install random functions from sources you don't trust.</span
  300. >
  301. </div>
  302. </div>
  303. <button
  304. class="px-3 py-1.5 text-sm font-medium bg-emerald-600 hover:bg-emerald-700 text-gray-50 transition rounded-lg"
  305. type="submit"
  306. >
  307. {$i18n.t('Save')}
  308. </button>
  309. </div>
  310. </div>
  311. </form>
  312. </div>
  313. </div>
  314. <ConfirmDialog
  315. bind:show={showConfirm}
  316. on:confirm={() => {
  317. submitHandler();
  318. }}
  319. >
  320. <div class="text-sm text-gray-500">
  321. <div class=" bg-yellow-500/20 text-yellow-700 dark:text-yellow-200 rounded-lg px-4 py-3">
  322. <div>Please carefully review the following warnings:</div>
  323. <ul class=" mt-1 list-disc pl-4 text-xs">
  324. <li>Functions allow arbitrary code execution.</li>
  325. <li>Do not install functions from sources you do not fully trust.</li>
  326. </ul>
  327. </div>
  328. <div class="my-3">
  329. I acknowledge that I have read and I understand the implications of my action. I am aware of
  330. the risks associated with executing arbitrary code and I have verified the trustworthiness of
  331. the source.
  332. </div>
  333. </div>
  334. </ConfirmDialog>