Improve docs (#1223)

* better interlinking

* upload imgs

docs/source/configuration/models/tools.md

@@ -2,6 +2,11 @@
 
 Tool calling instructs the model to generate an output matching a user-defined schema, which may be parsed for invoking external tools. The model simply chooses the tools and their parameters. Currently, only `TGI` and `Cohere` with `Command R+` are supported.
 
+<div class="flex justify-center">
+<img class="block dark:hidden" src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/chat-ui/tools-light.png" height="auto"/>
+<img class="hidden dark:block" src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/chat-ui/tools-dark.png" height="auto"/>
+</div>
+
 ## TGI Configuration
 
 A custom tokenizer is required for prompting the model for generating tool calls, as well as prompting with the results. The expected format for these tools and the resulting tool calls are hard coded for TGI, so it's likely that only the following configuration will work:

docs/source/configuration/web-search.md

@@ -11,6 +11,11 @@ Chat UI features a powerful Web Search feature. A high level overview of how it
 7. Get the corresponding Markdown elements and their parent, up to 8000 characters
 8. Supply the information as context to the model
 
+<div class="flex justify-center">
+<img class="block dark:hidden" src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/chat-ui/websearch-light.png" height="auto"/>
+<img class="hidden dark:block" src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/chat-ui/websearch-dark.png" height="auto"/>
+</div>
+
 ## Providers
 
 Many providers are supported for the web search, or you can use locally scraped Google results.

docs/source/index.md

@@ -2,13 +2,29 @@
 
 Open source chat interface with support for tools, web search, multimodal and many API providers. The app uses MongoDB and SvelteKit behind the scenes. Try the live version of the app called [HuggingChat on hf.co/chat](https://huggingface.co/chat) or [setup your own instance](./installation/spaces).
 
-🔧 **Tools**: Function calling with custom tools and support for [Zero GPU spaces](https://huggingface.co/spaces/enzostvs/zero-gpu-spaces)
+🔧 **[Tools](./configuration/models/tools)**: Function calling with custom tools and support for [Zero GPU spaces](https://huggingface.co/spaces/enzostvs/zero-gpu-spaces)
 
-🔍 **Web Search**: Automated web search, scraping and RAG for all models
+🔍 **[Web Search](./configuration/web-search)**: Automated web search, scraping and RAG for all models
 
-🐙 **Multimodal**: Accepts image file uploads on supported providers
+🐙 **[Multimodal](./configuration/models/multimodal)**: Accepts image file uploads on supported providers
 
-👤 **OpenID**: Optionally setup OpenID for user authentication
+👤 **[OpenID](./configuration/open-id)**: Optionally setup OpenID for user authentication
+
+<div class="flex flex-wrap">
+
+<div class="flex justify-center">
+Tools
+<img class="block dark:hidden" src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/chat-ui/tools-light.png" height="auto"/>
+<img class="hidden dark:block" src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/chat-ui/tools-dark.png" height="auto"/>
+</div>
+
+<div class="flex justify-center">
+Web Search
+<img class="block dark:hidden" src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/chat-ui/websearch-light.png" height="auto"/>
+<img class="hidden dark:block" src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/chat-ui/websearch-dark.png" height="auto"/>
+</div>
+
+</div>
 
 ## Quickstart