From 6a624acf5589cf61e1cfe6ad9ccf104c7c97f175 Mon Sep 17 00:00:00 2001 From: Heiner Lohaus Date: Sat, 7 Dec 2024 19:38:04 +0100 Subject: Use custom user data dir for each provider Reuse cookies and access token in Copilot Send in the gui messages to multiple providers at once Add GUI documenation --- README.md | 22 ++-- docs/gui.md | 147 +++++++++++++++++++++++++ g4f/Provider/Copilot.py | 38 +++---- g4f/Provider/needs_auth/BingCreateImages.py | 4 +- g4f/Provider/needs_auth/Gemini.py | 2 +- g4f/Provider/needs_auth/MicrosoftDesigner.py | 2 +- g4f/Provider/needs_auth/OpenaiChat.py | 2 +- g4f/gui/client/index.html | 44 ++++++-- g4f/gui/client/static/css/style.css | 80 ++++++++++++-- g4f/gui/client/static/js/chat.v1.js | 156 ++++++++++++++++++++++----- g4f/gui/server/api.py | 90 ++++++++-------- g4f/gui/server/backend.py | 8 +- g4f/image.py | 3 + g4f/providers/types.py | 2 +- g4f/requests/__init__.py | 4 +- 15 files changed, 481 insertions(+), 123 deletions(-) create mode 100644 docs/gui.md diff --git a/README.md b/README.md index 3b847e49..3bff730b 100644 --- a/README.md +++ b/README.md @@ -132,17 +132,27 @@ To ensure the seamless operation of our application, please follow the instructi By following these steps, you should be able to successfully install and run the application on your Windows system. If you encounter any issues during the installation process, please refer to our Issue Tracker or try to get contact over Discord for assistance. -Run the **Webview UI** on other Platforms: +--- + +### Learn More About the GUI + +For detailed instructions on how to set up, configure, and use the GPT4Free GUI, refer to the **GUI Documentation**: + +- [GUI Documentation](docs/gui.md) -- [/docs/webview](docs/webview.md) +This guide includes step-by-step details on provider selection, managing conversations, using advanced features like speech recognition, and more. -##### Use your smartphone: +--- + +### Use Your Smartphone -Run the Web UI on Your Smartphone: +Run the Web UI on your smartphone for easy access on the go. Check out the dedicated guide to learn how to set up and use the GUI on your mobile device: -- [/docs/guides/phone](docs/guides/phone.md) +- [Run on Smartphone Guide](docs/guides/phone.md) + +--- -#### Use python +### Use python ##### Prerequisites: diff --git a/docs/gui.md b/docs/gui.md new file mode 100644 index 00000000..aa946bb6 --- /dev/null +++ b/docs/gui.md @@ -0,0 +1,147 @@ +# G4F - GUI Documentation + +## Overview +The G4F GUI is a self-contained, user-friendly interface designed for interacting with multiple AI models from various providers. It allows users to generate text, code, and images effortlessly. Advanced features such as speech recognition, file uploads, conversation backup/restore, and more are included. Both the backend and frontend are fully integrated into the GUI, making setup simple and seamless. + +## Features + +### 1. **Multiple Providers and Models** + - **Provider/Model Selection via Dropdown:** Use the select box to choose a specific **provider/model combination**. + - **Pinning Provider/Model Combinations:** After selecting a provider and model from the dropdown, click the **pin button** to add the combination to the pinned list. + - **Remove Pinned Combinations:** Each pinned provider/model combination is displayed as a button. Clicking on the button removes it from the pinned list. + - **Send Requests to Multiple Providers:** You can pin multiple provider/model combinations and send requests to all of them simultaneously, enabling fast and comprehensive content generation. + +### 2. **Text, Code, and Image Generation** + - **Text and Code Generation:** Enter prompts to generate text or code outputs. + - **Image Generation:** Provide text prompts to generate images, which are shown as thumbnails. Clicking on a thumbnail opens the image in a lightbox view. + +### 3. **Gallery Functionality** + - **Image Thumbnails:** Generated images appear as small thumbnails within the conversation. + - **Lightbox View:** Clicking a thumbnail opens the image in full size, along with the prompt used to generate it. + - **Automatic Image Download:** Enable automatic downloading of generated images through the settings. + +### 4. **Conversation Management** + - **Message Reuse:** While messages can't be edited, you can copy and reuse them. + - **Message Deletion:** Conversations can be deleted for a cleaner workspace. + - **Conversation List:** The left sidebar displays a list of active and past conversations for easy navigation. + - **Change Conversation Title:** By clicking the three dots next to a conversation title, you can either delete or change its title. + - **Backup and Restore Conversations:** Backup and restore all conversations and messages as a JSON file (accessible via the settings). + +### 5. **Speech Recognition and Synthesis** + - **Speech Input:** Use speech recognition to input prompts by speaking instead of typing. + - **Speech Output (Text-to-Speech):** The generated text can be read aloud using speech synthesis. + - **Custom Language Settings:** Configure the language used for speech recognition to match your preference. + +### 6. **File Uploads** + - **Image Uploads:** Upload images that will be appended to your message and sent to the AI provider. + - **Text File Uploads:** Upload text files, and their contents will be added to the message to provide more detailed input to the AI. + +### 7. **Web Access and Settings** + - **DuckDuckGo Web Access:** Enable web access through DuckDuckGo for privacy-focused browsing. + - **Theme Toggle:** Switch between **dark mode** and **light mode** in the settings. + - **Provider Visibility:** Hide unused providers in the settings using toggle buttons. + - **Log Access:** View application logs, including error messages and debug logs, through the settings. + +### 8. **Authentication** + - **Basic Authentication:** Set a password for Basic Authentication using the `--g4f-api-key` argument when starting the web server. + +## Installation + +You can install the G4F GUI either as a full stack or in a lightweight version: + +1. **Full Stack Installation** (includes all packages, including browser support and drivers): + ```bash + pip install -U g4f[all] + ``` + +2. **Slim Installation** (does not include browser drivers, suitable for headless environments): + ```bash + pip install -U g4f[slim] + ``` + + - **Full Stack Installation:** This installs all necessary dependencies, including browser support for web-based interactions. + - **Slim Installation:** This version is lighter, with no browser support, ideal for environments where browser interactions are not required. + +## Setup + +### Setting the Environment Variable + +It is **recommended** to set a `G4F_API_KEY` environment variable for authentication. You can do this as follows: + +On **Linux/macOS**: +```bash +export G4F_API_KEY="your-api-key-here" +``` + +On **Windows**: +```bash +set G4F_API_KEY="your-api-key-here" +``` + +### Start the GUI and Backend + +Run the following command to start both the GUI and backend services based on the G4F client: + +```bash +python -m g4f --debug --port 8080 --g4f-api-key $G4F_API_KEY +``` + +This starts the GUI at `http://localhost:8080` with all necessary backend components running seamlessly. + +### Access the GUI + +Once the server is running, open your browser and navigate to: + +``` +http://localhost:8080/chat/ +``` + +## Using the Interface + +1. **Select and Manage Providers/Models:** + - Use the **select box** to view the list of available providers and models. + - Select a **provider/model combination** from the dropdown. + - Click the **pin button** to add the combination to your pinned list. + - To **unpin** a combination, click the corresponding button in the pinned list. + +2. **Input a Prompt:** + - Enter your prompt manually or use **speech recognition** to dictate it. + - You can also upload **images** or **text files** to be included in the prompt. + +3. **Generate Content:** + - Click the "Generate" button to produce the content. + - The AI will generate text, code, or images depending on the prompt. + +4. **View and Interact with Results:** + - **For Text/Code:** The generated content will appear in the conversation window. + - **For Images:** Generated images will be shown as thumbnails. Click on them to view in full size. + +5. **Backup and Restore Conversations:** + - Backup all your conversations as a **JSON file** and restore them at any time via the settings. + +6. **Manage Conversations:** + - Delete or rename any conversation by clicking the three dots next to the conversation title. + +### Gallery Functionality + +- **Image Thumbnails:** All generated images are shown as thumbnails within the conversation window. +- **Lightbox View:** Clicking a thumbnail opens the image in a larger view along with the associated prompt. +- **Automatic Image Download:** Enable automatic downloading of generated images in the settings. + +## Settings Configuration + +1. **API Key:** Set your API key when starting the server by defining the `G4F_API_KEY` environment variable. +2. **Provider Visibility:** Hide unused providers through the settings. +3. **Theme:** Toggle between **dark mode** and **light mode**. Disabling dark mode switches to a white theme. +4. **DuckDuckGo Access:** Enable DuckDuckGo for privacy-focused web browsing. +5. **Speech Recognition Language:** Set your preferred language for speech recognition. +6. **Log Access:** View logs, including error and debug messages, from the settings menu. +7. **Automatic Image Download:** Enable this feature to automatically download generated images. + +## Known Issues + +- **Gallery Loading:** Large images may take time to load depending on system performance. +- **Speech Recognition Accuracy:** Accuracy may vary depending on microphone quality or speech clarity. +- **Provider Downtime:** Some AI providers may experience downtime or disruptions. + +[Return to Home](/) \ No newline at end of file diff --git a/g4f/Provider/Copilot.py b/g4f/Provider/Copilot.py index ee9daf33..23f175ac 100644 --- a/g4f/Provider/Copilot.py +++ b/g4f/Provider/Copilot.py @@ -29,13 +29,9 @@ from .. import debug class Conversation(BaseConversation): conversation_id: str - cookie_jar: CookieJar - access_token: str - def __init__(self, conversation_id: str, cookie_jar: CookieJar, access_token: str = None): + def __init__(self, conversation_id: str): self.conversation_id = conversation_id - self.cookie_jar = cookie_jar - self.access_token = access_token class Copilot(AbstractProvider, ProviderModelMixin): label = "Microsoft Copilot" @@ -50,6 +46,9 @@ class Copilot(AbstractProvider, ProviderModelMixin): websocket_url = "wss://copilot.microsoft.com/c/api/chat?api-version=2" conversation_url = f"{url}/c/api/conversations" + + _access_token: str = None + _cookies: CookieJar = None @classmethod def create_completion( @@ -69,42 +68,43 @@ class Copilot(AbstractProvider, ProviderModelMixin): raise MissingRequirementsError('Install or update "curl_cffi" package | pip install -U curl_cffi') websocket_url = cls.websocket_url - access_token = None headers = None - cookies = conversation.cookie_jar if conversation is not None else None if cls.needs_auth or image is not None: - if conversation is None or conversation.access_token is None: + if cls._access_token is None: try: - access_token, cookies = readHAR(cls.url) + cls._access_token, cls._cookies = readHAR(cls.url) except NoValidHarFileError as h: debug.log(f"Copilot: {h}") try: get_running_loop(check_nested=True) - access_token, cookies = asyncio.run(get_access_token_and_cookies(cls.url, proxy)) + cls._access_token, cls._cookies = asyncio.run(get_access_token_and_cookies(cls.url, proxy)) except MissingRequirementsError: raise h - else: - access_token = conversation.access_token - debug.log(f"Copilot: Access token: {access_token[:7]}...{access_token[-5:]}") - websocket_url = f"{websocket_url}&accessToken={quote(access_token)}" - headers = {"authorization": f"Bearer {access_token}"} + debug.log(f"Copilot: Access token: {cls._access_token[:7]}...{cls._access_token[-5:]}") + websocket_url = f"{websocket_url}&accessToken={quote(cls._access_token)}" + headers = {"authorization": f"Bearer {cls._access_token}"} with Session( timeout=timeout, proxy=proxy, impersonate="chrome", headers=headers, - cookies=cookies, + cookies=cls._cookies, ) as session: + if cls._access_token is not None: + cls._cookies = session.cookies.jar response = session.get("https://copilot.microsoft.com/c/api/user") raise_for_status(response) - debug.log(f"Copilot: User: {response.json().get('firstName', 'null')}") + user = response.json().get('firstName') + if user is None: + cls._access_token = None + debug.log(f"Copilot: User: {user or 'null'}") if conversation is None: response = session.post(cls.conversation_url) raise_for_status(response) conversation_id = response.json().get("id") if return_conversation: - yield Conversation(conversation_id, session.cookies.jar, access_token) + yield Conversation(conversation_id) prompt = format_prompt(messages) debug.log(f"Copilot: Created conversation: {conversation_id}") else: @@ -162,7 +162,7 @@ class Copilot(AbstractProvider, ProviderModelMixin): raise RuntimeError(f"Invalid response: {last_msg}") async def get_access_token_and_cookies(url: str, proxy: str = None, target: str = "ChatAI",): - browser = await get_nodriver(proxy=proxy) + browser = await get_nodriver(proxy=proxy, user_data_dir="copilot") page = await browser.get(url) access_token = None while access_token is None: diff --git a/g4f/Provider/needs_auth/BingCreateImages.py b/g4f/Provider/needs_auth/BingCreateImages.py index b95a78c3..c2d403d7 100644 --- a/g4f/Provider/needs_auth/BingCreateImages.py +++ b/g4f/Provider/needs_auth/BingCreateImages.py @@ -9,11 +9,11 @@ from ..bing.create_images import create_images, create_session class BingCreateImages(AsyncGeneratorProvider, ProviderModelMixin): label = "Microsoft Designer in Bing" - parent = "Bing" url = "https://www.bing.com/images/create" working = True needs_auth = True - image_models = ["dall-e"] + image_models = ["dall-e-3"] + models = image_models def __init__(self, cookies: Cookies = None, proxy: str = None, api_key: str = None) -> None: if api_key is not None: diff --git a/g4f/Provider/needs_auth/Gemini.py b/g4f/Provider/needs_auth/Gemini.py index 3c842f3c..85b4ad0b 100644 --- a/g4f/Provider/needs_auth/Gemini.py +++ b/g4f/Provider/needs_auth/Gemini.py @@ -69,7 +69,7 @@ class Gemini(AsyncGeneratorProvider): if debug.logging: print("Skip nodriver login in Gemini provider") return - browser = await get_nodriver(proxy=proxy) + browser = await get_nodriver(proxy=proxy, user_data_dir="gemini") login_url = os.environ.get("G4F_LOGIN_URL") if login_url: yield f"Please login: [Google Gemini]({login_url})\n\n" diff --git a/g4f/Provider/needs_auth/MicrosoftDesigner.py b/g4f/Provider/needs_auth/MicrosoftDesigner.py index 715f11ac..57b96e2d 100644 --- a/g4f/Provider/needs_auth/MicrosoftDesigner.py +++ b/g4f/Provider/needs_auth/MicrosoftDesigner.py @@ -142,7 +142,7 @@ def readHAR(url: str) -> tuple[str, str]: return api_key, user_agent async def get_access_token_and_user_agent(url: str, proxy: str = None): - browser = await get_nodriver(proxy=proxy) + browser = await get_nodriver(proxy=proxy, user_data_dir="designer") page = await browser.get(url) user_agent = await page.evaluate("navigator.userAgent") access_token = None diff --git a/g4f/Provider/needs_auth/OpenaiChat.py b/g4f/Provider/needs_auth/OpenaiChat.py index d9ed6078..3ce5b1a1 100644 --- a/g4f/Provider/needs_auth/OpenaiChat.py +++ b/g4f/Provider/needs_auth/OpenaiChat.py @@ -510,7 +510,7 @@ class OpenaiChat(AsyncGeneratorProvider, ProviderModelMixin): @classmethod async def nodriver_auth(cls, proxy: str = None): - browser = await get_nodriver(proxy=proxy) + browser = await get_nodriver(proxy=proxy, user_data_dir="chatgpt") page = browser.main_tab def on_request(event: nodriver.cdp.network.RequestWillBeSent): if event.request.url == start_url or event.request.url.startswith(conversation_url): diff --git a/g4f/gui/client/index.html b/g4f/gui/client/index.html index 301de1b8..eb67bb7a 100644 --- a/g4f/gui/client/index.html +++ b/g4f/gui/client/index.html @@ -20,6 +20,7 @@ + - +