FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

fixes and previews · devforth/adminforth@bc213d1 · GitHub

Repository navigation

Commit bc213d1

Browse files
committed
fixes and previews
1 parent 1e9fc1e commit bc213d1

44 files changed

Lines changed: 736 additions & 200 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎adminforth/documentation/blog/2019-05-28-first-blog-post.md‎

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎adminforth/documentation/blog/2019-05-29-long-blog-post.md‎

Lines changed: 0 additions & 44 deletions
This file was deleted.

‎adminforth/documentation/blog/2021-08-01-mdx-blog-post.mdx‎

Lines changed: 0 additions & 20 deletions
This file was deleted.
Binary file not shown.

‎adminforth/documentation/blog/2021-08-26-welcome/index.md‎

Lines changed: 0 additions & 25 deletions
This file was deleted.
Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
---
2+
slug: chatgpt-plugin
3+
title: Chat-GPT plugin to co-write texts and strings
4+
authors: ivanb
5+
tags: [chatgpt, plugin]
6+
---
7+
8+
Couple of days ago we released a plugin which allows you to co-write texts and strings with the AI.
9+
10+
Today LLM is already a must tool to speed-up writing, brainstorming, or generating ideas.
11+
12+
Here is how it looks in action:
13+
14+
![alt text](../../docs/tutorial/05-Plugins/demoChatGpt.gif)
15+
16+
## Simple controls
17+
18+
To control plugin we use our open-source [vue-suggestion-input](https://github.com/devforth/vue-suggestion-input).
19+
It allows to:
20+
* Complete suggestion with `Tab`.
21+
* Complete word with `Ctrl + Right`.
22+
* Regenerate suggestion with `Ctrl + Down`.
23+
* On mobile suggestion word is accepted with swipe right on the screen.
24+
25+
## Want to try it out?
26+
27+
First follow the instructions in the [Getting Started](https://adminforth.dev/docs/tutorial/gettingStarted)
28+
29+
tutorial to create a new project.
30+
31+
To install the plugin, follow the instructions in the [Chat-GPT plugin page](https://adminforth.dev/docs/tutorial/Plugins/chat-gpt).
32+
33+
34+
## Context matters, but with sane limit!
35+
36+
When the prompts are called, the plugin passes to LLM not only previous text in current field to complete, but also passes values of other fields in record edited. This allows to generate more relevant completions.
37+
For example if you have a record with fields `title` and `description`, and you are editing `description`, the plugin will pass `title` value to LLM as well.
38+
39+
But obviously longer prompts lead to higher LLM costs and longer response times. That is why we created mechanics to limit the length of prompts passed to LLM.
40+
41+
Limitation is done on 2 levels:
42+
- plugin settings have `expert.promptInputLimit` - limits length of edited field passed to LLM. If field is longer, it will pass only last `promptInputLimit` characters.
43+
- plugin settings have `expert.recordContext` which defines limits for other fields in record. Each field can't be longer then `maxFieldLength` (default is 300). If field is longer then it is split to parts `splitParts` and they are joined with '...'. Also if there are more non-empty fields then `maxFields`, then plugin selects top longest `maxFields` fields to pass to LLM.
44+
45+
In the end, total number of characters passed to LLM is limited by formula:
46+
47+
```
48+
promptInputLimit + maxFields * maxFieldLength + <LLM request static part>
49+
```
50+
51+
Where `<LLM request static part>` is a constant part of request to LLM which looks like this:
52+
53+
```
54+
Continue writing for text/string field "${this.options.fieldName}" in the table "${resLabel}"\n
55+
Record has values for the context: ${inputContext}\n
56+
Current field value: ${currentVal}\n
57+
Don't talk to me. Just write text. No quotes. Don't repeat current field value, just write completion\n
58+
```
59+
60+
## Model configuration
61+
62+
Of course you can define which model to use for completion. By default plugin uses `gpt-4o-mini` model ($0.150 / 1M input tokens, $0.600 / 1M output tokens for Aug 2024). But you can change it to any other model available in OpenAI API. More powerful replacement is `gpt-4o` model ($5.00 / 1M input tokens, $15.00 / 1M output tokens for Aug 2024).
63+
64+
Also you can define other parameters for completion like:
65+
- `maxTokens` - most likely you don't want to waste tokens on longer completions, so default is 50 tokens.
66+
- `temperature` - model temperature, default is 0.7. You can increase it to get more creative completions (but with risk of getting nonsense). Or decrease it to get more conservative completions.
67+
- `debounceTime` - debounce time in milliseconds, default is 300. After typing each character, plugin waits for `debounceTime` milliseconds before sending request to LLM. If new character is typed during this time, then timer is reset. This is done to prevent sending too many requests to LLM.
68+
69+
## Frontend story
70+
71+
When we were working on plugin, we wanted to make it as user-friendly as possible.
72+
73+
Most frontend packages for completion have old-fashioned dropdowns, which are not very convenient to use.
74+
75+
We wanted to have something very similar to Copilot or Google doc. So we created our own package [vue-suggestion-input](https://github.com/devforth/vue-suggestion-input). It is also MIT and open-source so you can use it in your projects as well.
76+
77+
Under the hood vue-suggestion-input uses [quill](https://quilljs.com/) editor. Quill is one of the WYSIWYG editors which have really good
78+
API to work with DOM inside of editor. Basically all pieces of content in editor are represented as so called blots. And best thing - you can create your own custom blot. So we created our own blot which is responsible for rendering completion suggestion. Then you just "dance" around positioning of selection, suggestion and text modification, and thees things are easy-peasy with quill API.
Lines changed: 5 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,6 @@
1-
endi:
2-
name: Endilie Yacop Sucipto
3-
title: Maintainer of Docusaurus
4-
url: https://github.com/endiliey
5-
image_url: https://github.com/endiliey.png
1+
ivanb:
2+
name: Ivan Borshcho
3+
title: Maintainer of AdminForth
4+
url: https://github.com/ivictbor
5+
image_url: https://avatars.githubusercontent.com/u/1838656?v=4
66

7-
yangshun:
8-
name: Yangshun Tay
9-
title: Front End Engineer @ Facebook
10-
url: https://github.com/yangshun
11-
image_url: https://github.com/yangshun.png
12-
13-
slorber:
14-
name: Sébastien Lorber
15-
title: Docusaurus maintainer
16-
url: https://sebastienlorber.com
17-
image_url: https://github.com/slorber.png
Lines changed: 9 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,9 @@
1-
facebook:
2-
label: Facebook
3-
permalink: /facebook
4-
description: Facebook tag description
5-
hello:
6-
label: Hello
7-
permalink: /hello
8-
description: Hello tag description
9-
docusaurus:
10-
label: Docusaurus
11-
permalink: /docusaurus
12-
description: Docusaurus tag description
13-
hola:
14-
label: Hola
15-
permalink: /hola
16-
description: Hola tag description
1+
chatgpt:
2+
label: ChatGPT
3+
permalink: /chatgpt
4+
description: ChatGPT is a conversational AI model that can generate human-like responses to text inputs.
5+
6+
plugin:
7+
label: Plugin
8+
permalink: /plugin
9+
description: Plugins are extensions that add new features or functionality to a AdminForth.

‎adminforth/documentation/docs/tutorial/03-Customization/02-customFieldRendering.md‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -116,8 +116,10 @@ Now our component can read `filler` from `meta` prop:
116116
<template>
117117
<div class="flex items-center">
118118
<span v-for="room in record.number_of_rooms">
119-
- 🟨
120-
+ {{ meta.filler }}
119+
//diff-remove
120+
🟨
121+
//diff-add
122+
{{ meta.filler }}
121123
</span>
122124
{{ room.square_meter }} m²
123125
</div>
@@ -126,7 +128,8 @@ Now our component can read `filler` from `meta` prop:
126128
<script setup>
127129
defineProps({
128130
record: Object,
129-
+ meta: Object
131+
//diff-add
132+
meta: Object
130133
});
131134
</script>
132135
```

‎adminforth/documentation/docs/tutorial/05-Plugins/05-upload.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ export const admin = new AdminForth({
9999
//diff-add
100100
s3SecretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
101101
//diff-add
102-
allowedFileExtensions: ['jpg', 'jpeg', 'png', 'gif', 'webm'],
102+
allowedFileExtensions: ['jpg', 'jpeg', 'png', 'gif', 'webm', 'webp'],
103103
//diff-add
104104
maxFileSize: 1024 * 1024 * 20, // 5MB
105105
//diff-add

0 commit comments

Comments
 (0)

Back | FazBrowse Home | New Git URL