zack commited on
Commit
4408c31
1 Parent(s): 8ff81fb

fix\(Chat-nFace\): update submodule to latest commit

Browse files
Files changed (2) hide show
  1. README.md +26 -244
  2. images/chatty.png +3 -0
README.md CHANGED
@@ -1,257 +1,39 @@
1
- <div position="absolute" align="center">
2
- <h1 style="">Gradio Flow <img src="frontend/src/images/logo.svg" style="width:40px; height:40px;"/></h1>
3
- </div>
4
- <img src="./images/Header.gif"/>
5
 
6
 
7
- ## 👋 Reach Me For Inquiry or Bugs
 
8
 
9
- ```console
10
- @Discord-Server: Hugging Face https://discord.com/invite/feTf9x3ZSB
11
- @Discord-Name : Luca Vivona
12
- ```
 
 
 
13
 
14
- ## What Is Gradio Flow
15
- **A web application with a backend in [Flask](https://flask.palletsprojects.com/en/2.2.x/) and frontend in [React](https://reactjs.org), and [React flow](https://reactflow.dev/) node base environment to
16
- stream both [Gradio](https://gradio.app) ( and later [Streamlit](https://streamlit.io) ) interfaces, within a single application.**
17
-
18
-
19
- ## Tabel Of Contents 📚
20
- - [**Application**](#application-%EF%B8%8F)
21
-
22
-
23
- - [**Features**](#features-)
24
-
25
-
26
- - [**Light/Dark Mode**](#lightdark-mode--%EF%B8%8F)
27
-
28
-
29
- - [**Append Node**](#append-node-)
30
-
31
-
32
- - [**Resize Node**](#resize-node-)
33
-
34
-
35
- - [**Delete Node**](#delete-node-%EF%B8%8F)
36
-
37
-
38
- - [**Remove Node From Dashboard**](#remove-node-from-dashboard-)
39
-
40
-
41
- - [**Updates**](#updates-%EF%B8%8F)
42
-
43
-
44
- - [**Backend**](#backend-)
45
-
46
-
47
- - [**Frontend**](#frontend-%EF%B8%8F)
48
-
49
-
50
- - [**In The Works**](#in-the-works-)
51
-
52
- - [**App Architecture**](#app-architecture-%EF%B8%8F)
53
-
54
- - [**Prerequisites**](#prerequisites-)
55
-
56
- - [**Running The App**](#running-the-app-%EF%B8%8F)
57
-
58
- - [**Makefile Run**](#makefile-run-docker-)
59
-
60
-
61
- - [**Running the docker container**](#1-running-the-docker-container)
62
-
63
-
64
- - [**Entering the backend enviorment**](#2-entering-the-backend-enviorment)
65
-
66
-
67
- - [**Appending Nodes To Frontend From The Backend**](3-appending-nodes-to-frontend-from-the-backend)
68
-
69
-
70
- - [**Non-Docker Build**](#non-docker-build)
71
-
72
-
73
- - [**Build frontend**](#1-build-frontend-within-the-directory-frontend)
74
-
75
-
76
- - [**Run frontend**](#2-run-frontend-within-the-directory-frontend)
77
-
78
-
79
- - [**Build backend dependency**](#3-build-backend-dependency-within-the-directory-backend)
80
-
81
-
82
- - [**Build backend**](#4-run-backend-within-the-directory-backend)
83
-
84
-
85
- - [**Run Gradio within Gradio-Flow**](#5-run-gradio-within-gradio-flow)
86
-
87
- - [**More Demos**](#more-demos-)
88
-
89
-
90
-
91
- ## Application 🏛️
92
- ![Dark-Application](images/application_dark.png)
93
- ![Light-Application](images/application_light.png)
94
 
95
  ## Features 🌐
 
 
 
 
96
 
97
- ### Light/Dark Mode 🌕 ☀️
98
- ![theme](images/theme.gif)
99
-
100
- ### Append Node ➕
101
- ![Append](images/add.gif)
102
-
103
- ### Resize Node 📏
104
- ![Huggin](images/resize_new.gif)
105
-
106
- ### Delete Node 🗑️
107
- ![delete](images/delete_1.gif)
108
-
109
- ### Remove Node From Dashboard 🚮
110
- ![delete](images/delete_2.gif)
111
-
112
- ## Updates ⚒️
113
- ### Backend 💽
114
- - [ ] Bug fixes for max_thread when launching gradio
115
-
116
- ### Frontend 🖥️
117
- - [ ] Node
118
- - [ ] Append edges together (**removed for now**)
119
- - [ ] (In the works) Connection API paramters; Allow people to use Gradio Flow as a module base platform
120
- - [ ] within firefox draggable size change not availible due to code error (FIXED)
121
- - [ ] more responsive size adjuster
122
- - [ ] converted custom node from class component to functional react component
123
-
124
- - Node Menu
125
- - [ ] fixed some bugs from ``+ button`` for catching errors and wrong inputs
126
- - [ ] ``+ button`` now includes hugginface spaces, and gradio share
127
- - [ ] https://hf.space/embed/name_of_user/name_of_space/+
128
- - [ ] Examples: (https://hf.space/embed/marcop/musika/+, https://hf.space/embed/stabilityai/stable-diffusion/+)
129
- - [ ] better user interface for shared links
130
-
131
-
132
-
133
- <img width="1440" alt="image" src="https://user-images.githubusercontent.com/66436951/198501746-8abd6042-c3aa-4aa5-9a4f-72f11f92d4aa.png">
134
-
135
- ### In The Works 🚧
136
- - [ ] Mutiple windows within the react-flow environment
137
- - [ ] Directory tree search that looks for files that contain classes and functions that are registered under the decorators that are in ``backend/src/resources`` allowing you to append all your registered functions with only using the frontend.
138
- - [ ] Convert Flask API to FastAPI to complement new feture that allow user so add gradio endpoints (In the works)
139
- - [ ] API Input and Output components
140
-
141
-
142
-
143
- ## App Architecture 🏗️
144
- ![architecture](images/architecture.png)
145
-
146
- ## Prerequisites 📝
147
- You will need:
148
- (Docker build 🐳 Currently Only on: Linux/Windows/Mac)
149
- - [🐳 Docker](https://docs.docker.com/get-docker/)
150
- - [🐋 Docker Compose](https://docs.docker.com/compose/install/) (included with Docker Desktop on Windows and macOS)
151
-
152
- (Running Without docker)
153
- - 🐍 Python 3.2+ (backend)
154
- - npm 8.5.0 (frontend)
155
- - node v16.14.2 (frontend)
156
- ## Running The App 🖥️
157
-
158
- Starting up it's simple as every command is already within the Makefile.
159
-
160
- ### Makefile Run (Docker 🐳)
161
- #### **1.** Running the docker container
162
- ```console
163
- make up
164
- // command running: docker-compose up -d --remove-orphans;
165
- // **Ubuntu** sudo make up
166
- ```
167
- The React application will be running on ``http://localhost:3000`` and the Flask will be running on ``http://localhost:2000``
168
- #### **2.** Entering the backend enviorment
169
- ```console
170
- make environment
171
- // command running: docker exec -it backend bash;
172
- // **Ubuntu** sudo make environment
173
- ```
174
- Now that you're within the docker backend container environment you can start adding gradio/streamlit nodes within the frontend. (**Extra Note**) You do not need to be within the container environment to append nodes there is a feature to just run your own gradio application and then append it within the frontend by using the **+ button**.
175
-
176
- #### **3.** Appending Nodes To Frontend From The Backend
177
-
178
- ```console
179
- > cd ./src/demo
180
- > python demo.py -l 2000
181
- //run example gradio application
182
- ```
183
-
184
- ### Non-Docker Build
185
-
186
- #### **1.** Build Frontend (within the directory ``./frontend``)
187
- ```console
188
- npm install
189
- ```
190
- #### **2.** Run Frontend (within the directory ``./frontend``)
191
- ```console
192
- npm start
193
- ```
194
-
195
- #### **3.** Build Backend Dependency (within the directory ``./backend``)
196
- ```console
197
- pip install -r requirements.txt
198
- ```
199
-
200
- #### **4.** Run Backend (within the directory backend)
201
-
202
- ```console
203
- python app.py -p 2000
204
- //**NOTE** -p 2000 just assignes it localhost port 2000 anyother port will not work
205
- ```
206
- #### **5.** Run Gradio within Gradio-Flow
207
- It is quite simple, and similar within the docker build, the first way you can append your gradio to the Gradio flow is through running your application at a reachable url that is provided ed when you run Gradio and appending it via ``+ button`` within the frontend, another way that is possible is that within the directory ``./backend/src/resources`` there is a code that you can use to convert your own class or functional base code into basic gradio tabular interface by using decorators, these decorators will send the nesarry information to the backend flask api and update the frontend menu state in which you'll will be able to interact with it within the front end creating a hub for gradio build functions(**read more** [**here**](https://github.com/LVivona/GradioWrapper) or look at the code [**here**](https://github.com/LVivona/Gradio-Flow/blob/main/backend/src/resources/module.py) ).
208
-
209
- **NOTE** If you use the gradio decorator compiler for gradio flow you need to set a listen port to 2000 or else the api will never get the key and will throw you an error, I'll also provided an example below if this isn't clear.
210
-
211
- ```python
212
- # (functional base)
213
- ##########
214
- from resources import register, tabularGradio
215
-
216
- @register(["text"], ["text"], examples=[["Luca Vivona"]])
217
- def Hello_World(name):
218
- return f"👋 Hello {name}, and welcome to Gradio Flow 🤗"
219
-
220
- if __name__ == "__main__":
221
- # run single gradio
222
- tabularGradio([Hello_World]) # tabularGradio([Hello_World], ["Greeting"])
223
 
224
- # run it within Gradio-Flow
225
- # tabularGradio([Hello_World], listen=2000) # tabularGradio([Hello_World], ["Greeting"], listen=2000)
226
-
227
- ```
228
 
229
- ```python
230
- #(Class Base)
231
- ###########
232
- from resources import GradioModule, register
233
 
234
- @GradioModule
235
- class Greeting:
236
 
237
- @register(["text"], ["text"], examples=[["Luca Vivona"]])
238
- def Hello_World(self, name):
239
- return f"👋 Hello {name}, and welcome to Gradio Flow 🤗"
240
 
241
- if __name__ == "__main__":
242
- # run just gradio
243
- Greeting().launch()
244
- # run it within Gradio-flow
245
- # Greeting().launch(listen=2000)
246
- ```
247
 
248
- # More Demos ➕
249
- Within the ``backend/src/demo`` directory there are some demos
250
- ```command
251
- # type : class | function | load | None
252
- # port : 2000 | None
253
- # python demo.py -e [type] -l [port]
254
- (e.g)
255
- > python demo.py -e class -l 2000
256
- > python demo.py -e class
257
- ```
 
1
+ ![Chat'nFace Banner](images/chatty.png)
 
 
 
2
 
3
 
4
+ ## What Is Chat'nFace
5
+ **Chat'nFace is a web application designed to enhance the user experience of Gradio apps by providing a chat interface. It allows users to configure, suggest, and use Gradio apps through natural language processing (NLP), making it more accessible and interactive.**
6
 
7
+ ## Table Of Contents 📚
8
+ - [**Introduction**](#introduction-)
9
+ - [**Features**](#features-)
10
+ - [**Installation**](#installation-)
11
+ - [**Usage**](#usage-)
12
+ - [**Support and Contribution**](#support-and-contribution-)
13
+ - [**License**](#license-)
14
 
15
+ ## Introduction 🏛️
16
+ Chat'nFace is an innovative interface that integrates with Gradio applications to offer a conversational approach to interacting with machine learning models. It leverages NLP to understand user queries and provide appropriate responses, facilitating a more intuitive way to explore and utilize Gradio apps.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
17
 
18
  ## Features 🌐
19
+ - **NLP-Driven Chat Interface**: Engage with Gradio apps using natural language commands.
20
+ - **Dynamic Configuration**: Easily configure Gradio app settings through the chat interface.
21
+ - **Interactive Suggestions**: Receive suggestions and guidance on how to use Gradio apps effectively.
22
+ - **Seamless Integration**: Designed to work harmoniously with existing Gradio interfaces.
23
 
24
+ ## Installation 🛠️
25
+ To get started with Chat'nFace, clone the repository and follow the setup instructions provided in the documentation.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
26
 
27
+ ## Usage 🖥️
28
+ Once installed, you can start Chat'nFace and interact with your Gradio apps through the chat interface. Type in your requests or commands, and the system will process and execute them, providing a smooth and engaging user experience.
 
 
29
 
30
+ ## Support and Contribution 🤝
31
+ For any inquiries or bug reports, please reach out through the provided Discord server or contact Luca Vivona directly. Contributions to the project are welcome; please refer to the contribution guidelines for more information.
 
 
32
 
33
+ ## License 📄
34
+ Chat'nFace is released under the MIT License. For more details, see the LICENSE file in the repository.
35
 
36
+ ![Chat'nFace Interface](images/chatnface_interface.png)
 
 
37
 
38
+ Join our Discord community for support and to discuss further development of Chat'nFace:
 
 
 
 
 
39
 
 
 
 
 
 
 
 
 
 
 
images/chatty.png ADDED

Git LFS Details

  • SHA256: c6f04fdb5e207099f0d535c914130d5b0acff07e6b7c5377703f3df98a48729f
  • Pointer size: 130 Bytes
  • Size of remote file: 21 kB