Giter Club home page Giter Club logo

segment-anything-webui's Introduction

Segment Anything web UI

demo

This is a web interface for the Segment Anything.

Usage

Environment Require: Python >= 3.8.13, Node >= 18.15.0 (LTS), CUDA or MPS(optional)

  1. Fowllow the instructions in the Segment Anything and CLIP to install SAM and CLIP. And prepare webui environment:
# e.g. for Segment Anything
pip install git+https://github.com/facebookresearch/segment-anything.git
pip install opencv-python pycocotools matplotlib onnxruntime onnx

mkdir model
# download the model to `model/`
wget https://dl.fbaipublicfiles.com/segment_anything/sam_vit_b_01ec64.pth -O model/sam_vit_b_01ec64.pth
# https://dl.fbaipublicfiles.com/segment_anything/sam_vit_l_0b3195.pth
# https://dl.fbaipublicfiles.com/segment_anything/sam_vit_h_4b8939.pth

# e.g. for CLIP
pip install torch torchvision
pip install ftfy regex tqdm
pip install git+https://github.com/openai/CLIP.git

# python server as backend
pip3 install torch numpy 'uvicorn[standard]' fastapi pydantic python-multipart Pillow click
# or 
cd scripts && pip3 install -r requirements.txt
# webui frontend
npm i
  1. run the server and webui on different terminals:
python3 scripts/server.py   # webui backend
npm run dev                 # interactive webui frontend

Or

docker compose up

Advanced

Change the .env.local file to change the server address.

The model server can be run on a remote GUI server, and the webui can be run on a local machine.

The API in server.py is Pure Function. Though it is slow (Encoding Image Each Request), it is easy to deploy and maintain.

Reference

License

MIT

segment-anything-webui's People

Contributors

1024493603 avatar heimoshuiyu avatar kingfish404 avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar

Forkers

zhuxingwan dabblle moisesrbd rockblastd neophack wdkwdkwdk wangpf1129 wanghaisheng hsaigroup findyourmagic jorypai innovationcore xiaoxiaolai heimoshuiyu jonathhhan ahmed3520 jsntcheng 1024493603 alenaliu roemin1999 loucerac dev-binhnx linhong00316 hariharan1412 dxposmovon byancode l-369-maha

segment-anything-webui's Issues

server报错

求助，启动了前后端，然后上传图片点击后一直报错。
image

File Name

Is there a way to get the original file name of the file that i'm uploading from my local device?, I want the file name in my backend however i tried printing all the file related contents i'm either getting the TMP_DIR path or simple getting file name as 'image.png'.

Could you please help me?

Installation

Hi,

thanks for your work :-)

I'm trying to setup segment-anything-webui on Debian 12 and found that in "cd script" is missing an "s". It should be "cd scripts".

When trying to run "pip3 install -r requirements.txt" it gives me:

ERROR: pip's dependency resolver does not currently take into account all the packages that are installed. This behaviour is the source of the following dependency conflicts.
torchvision 0.16.1 requires torch==2.1.1, but you have torch 2.0.0 which is incompatible.

PS I'm running it in a fresh venv.

"pip3 install torch numpy 'uvicorn[standard]' fastapi pydantic python-multipart Pillow click" works.

clice error

image

error - src/pages/api/point.ts (32:21) @ handler error - Error [ReferenceError]: FormData is not defined at handler (webpack-internal:///(api)/./src/pages/api/point.ts:45:22) { digest: undefined } 30 | const filepath = file_list[0]['filepath'] 31 | const readStream = await fs.readFile(filepath) > 32 | const req_data = new FormData() | ^ 33 | const points = fields['points'][0] as string 34 | req_data.append('file', new Blob([readStream]), 'image') 35 | req_data.append('points', points) error - src/pages/api/point.ts (32:21) @ handler error - Error [ReferenceError]: FormData is not defined at handler (webpack-internal:///(api)/./src/pages/api/point.ts:45:22) { digest: undefined } 30 | const filepath = file_list[0]['filepath'] 31 | const readStream = await fs.readFile(filepath) > 32 | const req_data = new FormData() | ^ 33 | const points = fields['points'][0] as string 34 | req_data.append('file', new Blob([readStream]), 'image') 35 | req_data.append('points', points) error - src/pages/api/point.ts (32:21) @ handler error - Error [ReferenceError]: FormData is not defined at handler (webpack-internal:///(api)/./src/pages/api/point.ts:45:22) { digest: undefined } 30 | const filepath = file_list[0]['filepath'] 31 | const readStream = await fs.readFile(filepath) > 32 | const req_data = new FormData() | ^ 33 | const points = fields['points'][0] as string 34 | req_data.append('file', new Blob([readStream]), 'image') 35 | req_data.append('points', points) error - src/pages/api/point.ts (32:21) @ handler error - Error [ReferenceError]: FormData is not defined at handler (webpack-internal:///(api)/./src/pages/api/point.ts:45:22) { digest: undefined } 30 | const filepath = file_list[0]['filepath'] 31 | const readStream = await fs.readFile(filepath) > 32 | const req_data = new FormData() | ^ 33 | const points = fields['points'][0] as string 34 | req_data.append('file', new Blob([readStream]), 'image') 35 | req_data.append('points', points) error - src/pages/api/point.ts (32:21) @ handler error - Error [ReferenceError]: FormData is not defined at handler (webpack-internal:///(api)/./src/pages/api/point.ts:45:22) { digest: undefined } 30 | const filepath = file_list[0]['filepath'] 31 | const readStream = await fs.readFile(filepath) > 32 | const req_data = new FormData() | ^ 33 | const points = fields['points'][0] as string 34 | req_data.append('file', new Blob([readStream]), 'image') 35 | req_data.append('points', points) wait - compiling /api/everything (client and server)... event - compiled successfully in 44 ms (50 modules) error - src/pages/api/everything.ts (32:21) @ handler error - Error [ReferenceError]: FormData is not defined at handler (webpack-internal:///(api)/./src/pages/api/everything.ts:45:22) { digest: undefined } 30 | const filepath = file_list[0]['filepath'] 31 | const readStream = await fs.readFile(filepath) > 32 | const req_data = new FormData() | ^ 33 | req_data.append('file', new Blob([readStream]), 'image') 34 | const res_data = await fetch( 35 | API_URL + '/api/everything', error - src/pages/api/point.ts (32:21) @ handler error - Error [ReferenceError]: FormData is not defined at handler (webpack-internal:///(api)/./src/pages/api/point.ts:45:22) { digest: undefined } 30 | const filepath = file_list[0]['filepath'] 31 | const readStream = await fs.readFile(filepath) > 32 | const req_data = new FormData() | ^ 33 | const points = fields['points'][0] as string 34 | req_data.append('file', new Blob([readStream]), 'image') 35 | req_data.append('points', points) error - src/pages/api/point.ts (32:21) @ handler error - Error [ReferenceError]: FormData is not defined at handler (webpack-internal:///(api)/./src/pages/api/point.ts:45:22) { digest: undefined } 30 | const filepath = file_list[0]['filepath'] 31 | const readStream = await fs.readFile(filepath) > 32 | const req_data = new FormData() | ^ 33 | const points = fields['points'][0] as string 34 | req_data.append('file', new Blob([readStream]), 'image') 35 | req_data.append('points', points) error - src/pages/api/point.ts (32:21) @ handler error - Error [ReferenceError]: FormData is not defined at handler (webpack-internal:///(api)/./src/pages/api/point.ts:45:22) { digest: undefined } 30 | const filepath = file_list[0]['filepath'] 31 | const readStream = await fs.readFile(filepath) > 32 | const req_data = new FormData() | ^ 33 | const points = fields['points'][0] as string 34 | req_data.append('file', new Blob([readStream]), 'image') 35 | req_data.append('points', points) error - src/pages/api/point.ts (32:21) @ handler error - Error [ReferenceError]: FormData is not defined at handler (webpack-internal:///(api)/./src/pages/api/point.ts:45:22) { digest: undefined } 30 | const filepath = file_list[0]['filepath'] 31 | const readStream = await fs.readFile(filepath) > 32 | const req_data = new FormData() | ^ 33 | const points = fields['points'][0] as string 34 | req_data.append('file', new Blob([readStream]), 'image') 35 | req_data.append('points', points) error - src/pages/api/point.ts (32:21) @ handler error - Error [ReferenceError]: FormData is not defined at handler (webpack-internal:///(api)/./src/pages/api/point.ts:45:22) { digest: undefined } 30 | const filepath = file_list[0]['filepath'] 31 | const readStream = await fs.readFile(filepath) > 32 | const req_data = new FormData() | ^ 33 | const points = fields['points'][0] as string 34 | req_data.append('file', new Blob([readStream]), 'image') 35 | req_data.append('points', points) error - src/pages/api/point.ts (32:21) @ handler error - Error [ReferenceError]: FormData is not defined at handler (webpack-internal:///(api)/./src/pages/api/point.ts:45:22) { digest: undefined } 30 | const filepath = file_list[0]['filepath'] 31 | const readStream = await fs.readFile(filepath) > 32 | const req_data = new FormData() | ^ 33 | const points = fields['points'][0] as string 34 | req_data.append('file', new Blob([readStream]), 'image') 35 | req_data.append('points', points) error - src/pages/api/point.ts (32:21) @ handler error - Error [ReferenceError]: FormData is not defined at handler (webpack-internal:///(api)/./src/pages/api/point.ts:45:22) { digest: undefined } 30 | const filepath = file_list[0]['filepath'] 31 | const readStream = await fs.readFile(filepath) > 32 | const req_data = new FormData() | ^ 33 | const points = fields['points'][0] as string 34 | req_data.append('file', new Blob([readStream]), 'image') 35 | req_data.append('points', points) ^C ❯ npm run dev

[email protected] dev
next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info - Loaded env from /Users/jiangzhibin/workspace/openai/segment-anything-webui/.env.local
event - compiled client and server successfully in 594 ms (170 modules)
wait - compiling...
event - compiled successfully in 49 ms (137 modules)

wait - compiling / (client and server)...
event - compiled client and server successfully in 75 ms (177 modules)
wait - compiling /api/point (client and server)...
event - compiled successfully in 37 ms (49 modules)
error - Error: options.maxTotalFileSize (1048576 bytes) exceeded, received 1096312 bytes of file data
at Stream. (file:///Users/jiangzhibin/workspace/openai/segment-anything-webui/node_modules/formidable/src/Formidable.js:341:11)
at Stream.emit (node:events:513:28)
at MultipartParser.dataPropagation (file:///Users/jiangzhibin/workspace/openai/segment-anything-webui/node_modules/formidable/src/plugins/multipart.js:103:22)
at MultipartParser.emit (node:events:525:35)
at addChunk (node:internal/streams/readable:315:12)
at readableAddChunk (node:internal/streams/readable:289:9)
at MultipartParser.Readable.push (node:internal/streams/readable:228:10)
at MultipartParser._handleCallback (file:///Users/jiangzhibin/workspace/openai/segment-anything-webui/node_modules/formidable/src/parsers/Multipart.js:97:10)
at dataCallback (file:///Users/jiangzhibin/workspace/openai/segment-anything-webui/node_modules/formidable/src/parsers/Multipart.js:127:14)
at MultipartParser._transform (file:///Users/jiangzhibin/workspace/openai/segment-anything-webui/node_modules/formidable/src/parsers/Multipart.js:320:5)
at MultipartParser.Transform._write (node:internal/streams/transform:205:23)
at writeOrBuffer (node:internal/streams/writable:391:12)
at write (node:internal/streams/writable:332:10)
at MultipartParser.Writable.write (node:internal/streams/writable:336:10)
at IncomingForm.write (file:///Users/jiangzhibin/workspace/openai/segment-anything-webui/node_modules/formidable/src/Formidable.js:254:18)
at IncomingMessage. (file:///Users/jiangzhibin/workspace/openai/segment-anything-webui/node_modules/formidable/src/Formidable.js:202:16)
at IncomingMessage.emit (node:events:513:28)
at IncomingMessage.Readable.read (node:internal/streams/readable:527:10)
at flow (node:internal/streams/readable:1011:34)
at resume (node:internal/streams/readable:992:3)
at processTicksAndRejections (node:internal/process/task_queues:83:21) {
digest: undefined
}
wait - compiling /_error (client and server)...
event - compiled client and server successfully in 57 ms (191 modules)
error - Error: options.maxTotalFileSize (1048576 bytes) exceeded, received 1097008 bytes of file data
at Stream. (file:///Users/jiangzhibin/workspace/openai/segment-anything-webui/node_modules/formidable/src/Formidable.js:341:11)
at Stream.emit (node:events:513:28)
at MultipartParser.dataPropagation (file:///Users/jiangzhibin/workspace/openai/segment-anything-webui/node_modules/formidable/src/plugins/multipart.js:103:22)
at MultipartParser.emit (node:events:525:35)
at addChunk (node:internal/streams/readable:315:12)
at readableAddChunk (node:internal/streams/readable:289:9)
at MultipartParser.Readable.push (node:internal/streams/readable:228:10)
at MultipartParser._handleCallback (file:///Users/jiangzhibin/workspace/openai/segment-anything-webui/node_modules/formidable/src/parsers/Multipart.js:97:10)
at dataCallback (file:///Users/jiangzhibin/workspace/openai/segment-anything-webui/node_modules/formidable/src/parsers/Multipart.js:130:14)
at MultipartParser._transform (file:///Users/jiangzhibin/workspace/openai/segment-anything-webui/node_modules/formidable/src/parsers/Multipart.js:252:17)
at MultipartParser.Transform._write (node:internal/streams/transform:205:23)
at writeOrBuffer (node:internal/streams/writable:391:12)
at write (node:internal/streams/writable:332:10)
at MultipartParser.Writable.write (node:internal/streams/writable:336:10)
at IncomingForm.write (file:///Users/jiangzhibin/workspace/openai/segment-anything-webui/node_modules/formidable/src/Formidable.js:254:18)
at IncomingMessage. (file:///Users/jiangzhibin/workspace/openai/segment-anything-webui/node_modules/formidable/src/Formidable.js:202:16)
at IncomingMessage.emit (node:events:513:28)
at IncomingMessage.Readable.read (node:internal/streams/readable:527:10)
at flow (node:internal/streams/readable:1011:34)
at resume (node:internal/streams/readable:992:3)
at processTicksAndRejections (node:internal/process/task_queues:83:21) {
digest: undefined
}
error - Error: options.maxTotalFileSize (1048576 bytes) exceeded, received 1076229 bytes of file data
at Stream. (file:///Users/jiangzhibin/workspace/openai/segment-anything-webui/node_modules/formidable/src/Formidable.js:341:11)
at Stream.emit (node:events:513:28)
at MultipartParser.dataPropagation (file:///Users/jiangzhibin/workspace/openai/segment-anything-webui/node_modules/formidable/src/plugins/multipart.js:103:22)
at MultipartParser.emit (node:events:525:35)
at addChunk (node:internal/streams/readable:315:12)
at readableAddChunk (node:internal/streams/readable:289:9)
at MultipartParser.Readable.push (node:internal/streams/readable:228:10)
at MultipartParser._handleCallback (file:///Users/jiangzhibin/workspace/openai/segment-anything-webui/node_modules/formidable/src/parsers/Multipart.js:97:10)
at dataCallback (file:///Users/jiangzhibin/workspace/openai/segment-anything-webui/node_modules/formidable/src/parsers/Multipart.js:130:14)
at MultipartParser._transform (file:///Users/jiangzhibin/workspace/openai/segment-anything-webui/node_modules/formidable/src/parsers/Multipart.js:252:17)
at MultipartParser.Transform._write (node:internal/streams/transform:205:23)
at writeOrBuffer (node:internal/streams/writable:391:12)
at write (node:internal/streams/writable:332:10)
at MultipartParser.Writable.write (node:internal/streams/writable:336:10)
at IncomingForm.write (file:///Users/jiangzhibin/workspace/openai/segment-anything-webui/node_modules/formidable/src/Formidable.js:254:18)
at IncomingMessage. (file:///Users/jiangzhibin/workspace/openai/segment-anything-webui/node_modules/formidable/src/Formidable.js:202:16)
at IncomingMessage.emit (node:events:513:28)
at IncomingMessage.Readable.read (node:internal/streams/readable:527:10)
at flow (node:internal/streams/readable:1011:34)
at resume (node:internal/streams/readable:992:3)
at processTicksAndRejections (node:internal/process/task_queues:83:21) {
digest: undefined
}

Docker compose up error

Tried spinning up using docker compose up and got this:

2.327 ./src/components/interactive_segment.tsx
2.327 45:8  Warning: React Hook useEffect has a missing dependency: 'setScale'. Either include it or remove the dependency array. If 'setScale' changes too often, find the parent component that defines it and wrap that definition in useCallback.  react-hooks/exhaustive-deps
2.327
2.327 info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
2.703 Failed to compile.
2.703
2.703 ./src/pages/api/box.ts:24:28
2.703 Type error: Object is possibly 'undefined'.
2.703
2.703   22 |     const req_data = new FormData()
2.703   23 |     req_data.append('file', new Blob([readStream]), 'image')
2.703 > 24 |     req_data.append('box', fields['box'][0] as string)
2.703      |                            ^
2.703   25 |     const res_data = await fetch(
2.703   26 |         utils.config.API_URL + '/api/box',
2.703   27 |         {
------
failed to solve: process "/bin/sh -c npm run build" did not complete successfully: exit code: 1

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.