WEB GUI V2 is here. Go kick the tires!

[jmd1010]

It was time for a little upgrade and the enhancements are finally merged:

🎥 Demo Video
https://youtu.be/fcVitd4Kb98

🌟 Key Features

1. Pattern Descriptions
2. Pattern Tags
3. Pattern Favourites
4. Pattern Search bar
5. Pattern tile view
6. PDF to markdown (pdf as pattern input)
7. Better handling of Youtube url
8. Multilingual Support
9. Optional start/stop servers script
10. Windows resizing (chat, pattern instruction, pattern output)

Tu use, update to the latest release. Make sure you see the fabric/web folder. If not, clone repo and run: go install github.com/danielmiessler/fabric@latest from the fabric folder. Verify your environment variables as per the README.md file.

https://github.com/danielmiessler/fabric/blob/02e12b028c82e23fe12314f7339039df07a3dd7c/WEB%20INTERFACE%20MOD%20README%20FILES/WEB%20V2%20Install%20Guide.md

Install the web dependencies (if not already installed)

cd web
npm install
npx svelte-kit sync

Then proceed with your pdf-to-markdown installation (optional):

cd web

Install in this sequence:

Step 1: npm install -D patch-package
Step 2: npm install -D pdfjs-dist@2.5.207
Step 3: npm install -D github:jzillmann/pdf-to-markdown#modularize

Note: Ensure Go is installed https://go.dev/doc/install and node / npm for web https://nodejs.org/en/download.

If you get an ERROR.
It would be much appreciated that you copy /paste your error in your favorite LLM before opening a ticket, 90% of the time your llm will point you to the solution.

[gottapro]

Step 1: I get the following result??? please help. All is running on windows natively. Spent some hours trying to get GUI running.

npm error code EPERM
npm error syscall open
npm error path C:\Users\Jack\go\pkg\mod\github.com\danielmiessler\fabric@v1.4.146\web\package.json
npm error errno -4048
npm error Error: EPERM: operation not permitted, open 'C:\Users\Jack\go\pkg\mod\github.com\danielmiessler\fabric@v1.4.146\web\package.json'
npm error at async open (node:internal/fs/promises:638:25)
npm error at async writeFile (node:internal/fs/promises:1212:14)
npm error at async PackageJson.save (C:\Users\Jack\AppData\Local\nvm\v22.14.0\node_modules\npm\node_modules@npmcli\package-json\lib\index.js:255:14)
npm error at async [saveIdealTree] (C:\Users\Jack\AppData\Local\nvm\v22.14.0\node_modules\npm\node_modules@npmcli\arborist\lib\arborist\reify.js:1512:9)
npm error at async Arborist.reify (C:\Users\Jack\AppData\Local\nvm\v22.14.0\node_modules\npm\node_modules@npmcli\arborist\lib\arborist\reify.js:148:5)
npm error at async Install.exec (C:\Users\Jack\AppData\Local\nvm\v22.14.0\node_modules\npm\lib\commands\install.js:150:5)
npm error at async Npm.exec (C:\Users\Jack\AppData\Local\nvm\v22.14.0\node_modules\npm\lib\npm.js:207:9)
npm error at async module.exports (C:\Users\Jack\AppData\Local\nvm\v22.14.0\node_modules\npm\lib\cli\entry.js:74:5) {
npm error errno: -4048,
npm error code: 'EPERM',
npm error syscall: 'open',
npm error path: 'C:\Users\Jack\go\pkg\mod\github.com\danielmiessler\fabric@v1.4.146\web\package.json'
npm error }
npm error
npm error The operation was rejected by your operating system.
npm error It's possible that the file was already in use (by a text editor or antivirus),
npm error or that you lack permissions to access it.
npm error
npm error If you believe this might be a permissions issue, please double-check the
npm error permissions of the file and its containing directories, or try running
npm error the command again as root/Administrator.
npm error A complete log of this run can be found in: C:\Users\Jack\AppData\Local\npm-cache_logs\2025-02-28T04_41_36_782Z-debug-0.log

[jmd1010]

[gottapro]

Thank you like at least 1000 times for your attention! Your advice is appreciated.

I have struggled to separate instruction. GO and Python, Windows and Linux, Git pulls or Binaries. I am familiar with somethings and a complete newbie with others. Linux install would have likely been easier, but the allure of a one click Windows install got me super excited. It turns out, and correct me if I am wrong, that GO was needed also? Maybe prior the one click install?

I found the installation instruction less than intuitive. I had more success abandoning binaries for a source install via GO. Without any "GO" experience I have certainly made a mess of things!

This is an awesome project! Despite my limited success... I have already seen the light. Thank you again for your help. I will certainly let you know how it goes.

[jmd1010]

I know it gets complicated with the install nuances between operating systems. Personally I work on MAC. When in doubt, copy an instruction section and ask your llm: "Give me the equivalent for operating system 123".

[jmd1010]

[gottapro]

Ive just arrived home now, from my day job, and I am looking forward to implementing your suggestions shortly. I did want to mention that I had installed source files via GO from my home directory.

The reason I have been working in the GO cache, the folder indicated in my post, is that is where GO installed the repo. I had literally ran a search on the computer to find the "web" folder and that is the only place I found it.

I can certainly do a github pull to another directory and your assessment regarding permissions on the GO cache makes perfect sense to me, but I'm struggling to understand why the GO install would install the entirety of Fabric into a immutable location?

Again I feel there is nothing intuitive about any of the install methods presently. If I get my head wrapped around this native Windows install... I will attempt a fool proof installation manual devoted to windows installs exclusively. It may be helpful to eliminate any mentions of the original Python version, and make more clear the GO install requirement.

The windows binary install did get me to "fabric --setup" initially, but after closing out the terminal window, nothing was recognized as a viable command. The PATH variables were not set, and many of the folders, "WEB" included, were empty. Maybe if I installed with windows binary and then did a github pull to populate those folders... it would work? Do you think a GO install is necessary? Before or after the binary install? The only advantage I see is the ease of upgrade via GO. Does GO provide anything more?

And finally... Ive been compelled to install Node.Js and python, just to have "npm" for the webui and pdf-to-markdown install. None of which is mentioned in the fabric installation docs!

Hope I'm not beginning to sound snarky in the least bit? That is not my feeling at all! I'm laying this all out for my love of this project and a genuine desire to help bring it to the masses. Daniel Meissler has made a tremendous contribution to mankind if you ask me! Your help is an extension of that as well. Thank you for letting me dabble. :D

[jmd1010]

There are different ways of installing it. I just reinstalled to confirm the following approach works

1. Clone the repo (from parent directory)
2. cd fabric, then go install github.com/danielmiessler/fabric@latest
3. verify your environment variables as per official README
4. cd web
   npm install
   npx svelte-kit sync

Then proceed with your pdf-to-markdown installation: from /web as well
npm install -D patch-package
npm install -D pdfjs-dist@2.5.207
npm install -D github:jzillmann/pdf-to-markdown#modularize

Let me know how that works for you. If you still have issue, I recommend you move this discussion on the "issue" board as the intention of this post was to announce the new web 2.0 release which I authored. There are many more technically inclined people who can help you if you post there.

[knotty68]

Thanks for the reply. I did delete it after restarting everything and clicking through different models. Seems to work fine on everything now.

…

On Mon, 3 Mar 2025 at 14:11, JM ***@***.***> wrote: I don't see your post on the repo, did you delete it? Your error seems related to your Google AI API. Double check the LLM and model selected in the web app. Hope that helps. Jean On Mar 3, 2025, at 6:59 AM, knotty68 ***@***.***> wrote: Limited technical skill here, however I do have Fabric up and running in my Terminal on Mac Mini M2. I installed the web gui as per instructions, did get a number of npm audit warnings, but npm run dev starts the web gui and with fabric --serve running in a terminal window. The issue I am getting is that when trying to run any pattern in the chat gui, I am seeing the following.. 2025/03/03 11:47:29 Received chat request with 1 prompts 2025/03/03 11:47:29 Processing prompt 1: Model= Pattern=extract_predictions Context= 2025/03/03 11:47:30 Error from chatter.Send: googleapi: Error 404: [GIN] 2025/03/03 - 11:47:30 | 200 | 150.745958ms | ::1 | POST "/chat" Running the exact same thing in a terminal window produces the expected output so as far as i can see the API codes etc are correct. Any obvious thoughts or interventions. I'm trying to get something up and running that my wife will be able to interact with and the web gui would seem to be the way forward. Should I hop over the Web GUI and try noamsiegel's Mac app? — Reply to this email directly, view it on GitHub < #1327 (comment)>, or unsubscribe < https://github.com/notifications/unsubscribe-auth/AGCUMWLWGUEDYCBH65I4HG32SQ7YVAVCNFSM6AAAAABYAMTKYKVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTEMZXGQ3DIOA>. You are receiving this because you authored the thread. — Reply to this email directly, view it on GitHub <#1327 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BQB64Y7FNO6U6TGGQWWFRAT2SRPK7AVCNFSM6AAAAABYAMTKYKVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTEMZXGYZDIOA> . You are receiving this because you commented.Message ID: ***@***.***>

[ksylvan]

@jmd1010 I just tried the Web UI.

After following the instructions in README.md I have the beautiful looking UI, but when I try to execute any chat (to any model), I'm seeing this:

And in the GIN server log, I see this:

2025/03/21 11:53:55 Received chat request with 1 prompts
2025/03/21 11:53:55 Processing prompt 1: Model= Pattern=ai Context=
2025/03/21 11:53:55 Error from chatter.Send: error, status code: 400, status: 400 Bad Request, message: Invalid value for 'content': expected a string, got null.
[GIN] 2025/03/21 - 11:53:55 | 200 |  190.470375ms |             ::1 | POST     "/chat"

[jmd1010]

Hi, difficult to diagnose your issues remotely but here's a few things you can look at:

1. I assume you did your setup ie fabric --setup
2. Make sure the web/static/data/pattern_descriptions.json file matches the version in Pattern_Descriptions/pattern_descriptions.json as mentioned in the install guide.
3. Input is empty. Try a different pattern eg extract_wisdom with a youtube url or online article.
   Best of luck! Hope it works.

[ksylvan]

Hi @jmd1010, thanks for your response.

1. Yes, I have a perfectly working fabric setup on multiple OSes.
2. I've made no changes. This is all based on the latest HEAD from Git.
3. Input is not empty. Here is a short video. It becomes empty once you hit the submit button.

FabricUI-Bug.mp4

[ksylvan]

@jmd1010 Great. That fixes that issue. And I have a few more nits now:

1. The "Processing Content..." text is always flashing (making the user think that something else is going to be output).
2. The last line of a response is sometimes obscured by the window and you can't stretch the window or scroll up and down in a way that makes it visible.

See below:

[ksylvan]

@jmd1010 I just checked out your PR branch and it looks great. My window scrolling issue is fixed but the "Processing content..." perpetual fade-in and fade-out is there

[jmd1010]

Hi again, talked to you more than my wife today:)
I don’t have this issue on my mac but will look into it and include in my next update once I figure out how to implement your prompt improvement.

[ksylvan]

Ha 😄 Same here. My wife has been in an online class all day.

The Web UI is a really great piece of work. Thank you for that.

[jmd1010]

ok added a commit to the latest pr with a fix to the "processing mss". Again you can try it before it is merged by replacing the latest version of the handleSubmit() function.

[HHH-GH]

Hi jmd, I gave it a try. Thanks!

Initial feedback:

• Is there a specific version of Node.js you're testing with? I had install errors with Node 16, it worked fine with Node 20. (And I didn't try with Node 18 but happy to test it if that's helpful)
• I had the same comment as ksylvan The last line of a response is sometimes obscured by the window. (Latest Firefox)

[ksylvan]

You have to install the packages in a specific order (and do an update asked for by the frontend when it starts up) and then it just works. I'll see if I can dig it up. I'm using the latest node.js (and actually running everything using pnpm)