A10fy

First things first

First you will need to obtain the Gemini API key from Google and paste it on the settings page (screenshot shown for the web app version, in this case the settings are under the rightmost tab of the chat page):

Familiarizing yourself with the chat

Open the chat page in the web app or the side panel in the extension. On the chat tab pane type "Hi there!" into the input box at the bottom and press Ctrl+Enter on PC or Cmd+Enter on Mac or click the "Send" button next to the input box. If everything went fine, you will see something like this:

Open the Chat List tab and press "Summarize chat" button to assign a title to a chat and add it to the fuzzy search database. Normally, you would do this when the chat has 3-10 messages and the title is not as trivial as "Greeting". You should get something like this:

Go back to the Chat tab and try regenerating the LLM’s message by pressing the button in the message card header. If you stick to default model, you will get the same message after regeneration. Let’s see how to fix that and introduce some variety in responses.

Models

Go to the models settings and change the temperature parameter of the default model to 1.0:

Now go back to the chat and try regenerating the message multiple times. You will now see slightly different messages from time to time. Refer to Google Gemini documentation for the other parameters influencing the creativity and stability of the model’s output (Top-K and Top-P).

Personas

Personas are essentially named system instructions (a.k.a. system prompts) that steer the behaviour of LLMs. These are powerful tools to influence the model output format depending on a particular application. Try importing a “Doc” persona (that makes the model impersonate well-known Emmett Brown character) using the following link (click it to copy it to clipboard)

https://a10fy.net/share/persona#H4sIAAAAAAACA1VWa2scNxT9K7cLoWDsdZMmxd1vduwkbtM2UJNQWCga6e5KsUaa6jHrIeS_91zN-BXC4tVIuueex539tsoxFRf218Hw3Wpz8vJ45cxqs1odr4LqGX9dRo0vhrNObiguBqxd9T2XQhcpHkJ7uFPVlz-iYT-fzVMu3F-HXFLVcuiG-8GrIhd-e3FCOuKGUOjkxfdtODdqKGxol2JPtpQhb05POawP7tYNbJxax7Q_lW-nc-F_W-FtkJs4mGeX_RMrqcQU4oEu05oWqFvpY7uaIR9TsUysNU4lp0kFQ11y3juFa7J2WHe5zIC2qwulb6nEduhdLTXxGjd9YFSRSjn2TLc8kcoD65Ip7miKNZG2KildOMlh7rtops0WsF-uiY6Ozk3vkhJuaBcT_X1fNW-Ojki6sGpEATLMA6nnmy32RSBX_hFtPiYoBinn4gMXMnGf6W0cOAWna259XjmIwg4cyDfjMmSZ5NQAIyTlZvzXWSlNf_KhROy84PBVrqZ3SYVbL4dvbOxVpitcEJe7zn3HqTwUIPxvSLzq1tJQop0agbqgq1os2nCZfqueM30GQp5vmeaNvfOT9MN0QBmc2rugPNa2qxEkXCRVA0ToGHQwfYnJG_qiEl2vt4HwbxteNZZFu32KNZh7Wvs4wmtQ5AMEp8-4FNI1pd9z6lWYBPjLX386W9Nfj2UPrHyxE5nKcrahdMEy2lFBAztWCPrDP-2ZaAJgSyMAWWpgigslxaExsD2ypyHFr7DNms53YhVFOzmIvJUUJ0EK1zXXEsBlcUDD98uruaZ30g6WZN8ehtsDTC6qpRq3dTW7wFlU3QEt1l69PrECYnHODgHInEanGRbqqvNGdrkQ4gjHjYKlPWzOg40K_J7yA88_N54_YSmCKlcmumk2uudbIuJjNUA1gE9b_DQrHdFvEM7ULR1csfgwfMLSM98NCZjRbF7CGZWhPThB-PKafg_Ch-CZg6aKtoNNKjP88T6xKshTLOUHWERIQqEmeQcJRk5QBJ9dzKAqMWhpvOC5Aik2Rk9GREWgsbJdJTsV24Mmjcj3MTjEDrpX5WUOnMMXse4tGCuMEbIHqbM0WgWpqLqMpRPkx6A1aUcoSQyx2kKGXMiV6PYwko5J4hGygmmeWs7IPtg5C0WQU-beoxSvmxRXxbbJcOk89wjps3nCYQ-HNMPA_sDgCSPKja44KIwysSvKiddgRjQ6q-7CKFaBHFCxaiugBeat8PbRdRM6xf6EnGIQPblm8BUTxNV-TZecB8k-fAqZlF6uE6LAqmyWQXqw0C4osZ3qYi3N1ho7-b_KoVl0F7V4ev-QpidGHmrK1T2h5E2j5EbydjPn7ZN1PuY42EmIuQ7oXBI-IwGrXgYKwj6HRcoPCu8C0W3Xhr-053rEFhglfS01ZVZcXgV4nJmfZRx0PSj3EPT7EvMwn6ibKKtRVt565Fg-p7LE_ezszeKpGLSvRmhUMzmtTq-0RcxhuZqhI6YyMEsRmfGsESxyeLPBqJiT3ZPx8lQXt8jRSETbS6RhnGGYZwjDBnNWh1iEczyV-l5qo2iq7RfCI_3bcNXee4vqywvm_s2ALA8iLepq_ASojQ68p-d592OmGhxkpzE6GbEoaKG8yn0zZZNdL68NMD94viNezC-WQdfzOzOv8ZPE5c8uu87zdXgL7lYb_DTh7_8DAdIXWAEJAAA

and pasting it into the Import Persona dialog in the Personas tab of the Settings page:

(Do not try to open this link in the browser, this is used solely for importing purposes as of now.)

Start a new chat by clicking the “New Chat” button:

You now have the imported persona available in the list of personas for the chat:

Try asking a few questions to the persona in the chat and see the results!

Markdown in the chat

There are two de-facto standard formats for message exchange with an LLM: Markdown for humanly conversation and JSON for structured data. The chat has an integrated Markdown editor. To edit any message press the button. To save the message either press Ctrl+Enter or Cmd+Enter within the editor or press the button.

Any block of code (e.g. JSON, Python, JS, …) within Markdown is surrounded with ``` fences. The type of the block (also called the language tag) comes right after the opening fence. Try pasting the following message into the chat input to see the response on the LLM (using default model and persona):

What would be an equivalent Python code for this Java code snippet?
```java
public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hi A10fy!");
    }
}
```

Code players

In the resulting output of the LLM you should see the Python code block with button enabling you to run the resulting code block in the browser. Such ability is integrated into A10fy for Python code blocks, Mermaid diagrams and Vega JSON specifications. Try asking LLM to Output a simple Mermaid diagram or Draw a minimalistic pie chart with Vega. Press the button to see the code of those diagram and pie chart if it is hidden by default.

You can define a custom code player for any type of code. Let’s consider a non-trivial example of combining a custom persona that is designed to generate quiz specifications with a corresponding custom player that turns the LLM’s output into an actual quiz. Import the following persona:

https://a10fy.net/share/persona#H4sIAAAAAAACA21SsW7cMAz9FUKz46LrLUWQyUOGAkWB4HzoKRZtCZYpV6RxcYr-eyn7cm2KLBJJPT5Sj_xlOGUJNDTk8MUc7j5XJjhzMKYyZCdU6-sSXmFAwmwlZY075C6HWUKij597u0R5TA7jTsQrC04NseSlK2nfcJqjlcL-lBawGcGCxzj3SwTLHFgsCcw5uaXT5kA8AtIQA3v4qQVfkWto-i2-MGZNGhkkbY_gw_TJazARcJpQvFJUsGqlzhKkReZFtOCGDbSR9CnGdCml-pQnK4eWzuezI_ejoFo6tgSwHbcLoDWPK8zaPQlD6gWVy47YmuoNcWzNVHyFNvs1rYyxv9qB9PFU_eW7BPHv07W5aUertd6skP8x-T8Sj9unVhhS0aT87xlt5-vW7KhTufaUo9Z4UFWKOhHJFdqPun7fsZqakGFG6kL8oiGlPG2atdTSHYyI8y6sIpDBktvc1tw0NdDpiqhiQw33kRNQEnW9lQ2Zw-B1SsQXnST7tEQHNl7sypo3KbH-W97Gp4shNTxdJ6zbk3eS66xdyNhJXKHou-thu1FCN-791bqkgb8HDs8RG3rQHsxBlxV__wGlcfPXIAMAAA

Now go to the Player import:

and import the custom player by pasting the following link into the import dialog:

https://a10fy.net/share/player#H4sIAAAAAAACA61YeW_bNhT_KoQaNNJmy3bbrIBzFENSYC3WtVv712xjoSXaZiKRKkklcQN_9z1SJHXl6tYAsSXy8R2_d9K3AU2DaRAMAoZzAk9nAq-fp4IX6GtJv8F6SmQiaKEoZxVhhtm6xGvyBa9lMJ0FKUv_MbSLQYBLxYsMb4OpEiUZBBuaklOeEveelFLx_PTzZ2AVpyBqjZcZQbdzhlBSCsnFFBWcMkXE4Zzt5mzOnnEjW1ZEOWXDDaHrjZqiF-Pi5lAvFjhNKVtP0cStLLlICfCaFDcoxXJDUvRsPH69XK0c21jbWNTSm4xfOTbXNFWbKdJWHToiu3bwHaIEv66E4Iyu2ZAqksspSogzM3DAvNe4XFOW8utYEpaeVnABgJ8AVCL-IrLMVHhrdfhlPB4gp_TBeLyLgFsCWCnjvG9EnmGF0TF6__njH3GBhSRh0mH5CQucyziBBX16zlYlSzTgSG7K1SojIRYCb6PKgBUXKMyIQhS4mo04I2ytNmiIJoeweoLG8DUcWnrwqlHnAsg_YLWJVxnnIjSPAoOdeRihn1BI0c9oEkWH1ZmZ4Tyji0ElY3axWACDmXtxy3SxMCd2-kMQVQpW7TjkGyjEoPpbnGzCUC8ODEDvWEpuInR8YgPQI3fKmcKUEQFS98L9o5ReoSTDUh7PA70_TDxBvhweoPxm-GoenByNgPBkvzKj4ia1k1lCHuLoaJCOk3x7HyubBw9xcqmS8KzNQ3PRitcoOKEDr2IHDeQ36kMQQmqA9GePGCG6QuGvJiSoNN-GPIpqCmeJTr2_OSPGgnoTofOWNXWGgj3DF_MA8kvhoeY6pFo-0Ozdem12jsB4qCbwnvYEzrAGUQuEnQfvvNbOBWcTGe-LGBcF5GvoLGsS63RJuBAkUR-Nf8BsrfRsvGhQAcZh08-Ir3wG9nGskXQltAtlH0xHuVRM_4PxK47y4eRHwvZED1k4zG5baeTMPz4-bqPWptMu2rutaHc9X7W9hWqY6p4TdgQLckUElNF5QNkV1Ol0HgzaFFJhTeDrY9jxiP7bC9WGyiiGhnSqgQ8t8ATYtVa1AwpBcyy2ekeQnF-R5qb2Duwcdszu6cSLJ6rUFnG_VlbwHSrV-j6o1S6K02WWZDS5DB_QrApgwHRN1JnP9H4YQyDH7Zo7JV_DZnxGqG7ms6dG6mL2WKguztuKuDraNYHcUKlg_Dhr5GLHrHgFIgDFOvz6IOry2WNlu2vUhaRPWBWgLzzcC5-Al20U51EUJ-DfW2TiaB7AUANxDyVrpfwr2vUt93HupHYMdmwLLqmWpJlB_iiaaPaPCmsGU-u12wPrumtxaJLv3OMOkUySZgDeW8DbRVP3HT38mWKjY2OHbK2p5VgpVtFds9v2uPfEOgTDrmEVN8iF4JkdYvyWydnqlN5vKLyfYJEi7_d928QaB1pa2XnLCaqTSB_wL65Q4iQhRav-1aDX0NoprJHDLlSSjEsilRbUDk8tjcqa24OUEXr-3LPUGQxUdQ4DgWkcjXp_B4nTzfnQlS8od6JpH3QEBuNOSRv2eWuqqmhmfx3E8-AFzP-SQ-NAa0EIqxPcsy_Vf-fev130BWiXPSahKllw1RKw16xYJa2L02GbGmeC4HRrkhvkH3s1H6xqup61T_aLWWffV5Oufg8Hj1PD5pCOkqdWtUqNLvw2WfpaGLe4mlY5xkv7Xn8Z-bZcmDxPNiS5_BOs0zZV7TOsJ-y9vu2onbFEj-h3NNy7JsVH_ae9l3a6kL7ceeelHVSWOLlcC16yFBTMuIGhl4Z2oNNp-gZAyvTN1WYLMi0CZzn3qeMQ8tfj3758-B0uyEfVDxJIigRq9EapQk5HoyRlF1IHSpmuMixAL56P8AW-GWV0KUcXX0sitqOX8et4Yl9iuM7HF9IM-xXLkzn7H8xLOprEk5fxS_s-hJz6YSKWnCupBC5GB7ER0ViKlwA7oHynMN0eaGovru0-0uhz_jrbvH7a0_dTLUulINYM-0b4-hPuquEnx5NTTYU02dGoOm1lgZMVZHj1Y1Ew0_6f2V8DfJoGH7b65gQ5KeF6BJ0U5qxL0hjUZ_MgJ1UCvqu-8q0k2co-g-4w1g1qftdUbdrH1YbkFTU8bf0TFY1H2WGy0YoANVpzqDj6ES11MsZQHQzVQn9VR2Yg4xQztOUl1COmbxl3at3WGB7hgEBQlhKavYElYLkIdv8C12bt-74TAAA

Now start a new chat with the “Quiz generator” persona that you’ve imported and type something like the following message into the chat input:

Test me on the usage of English proverbs. No more than 5-6 questions please.

You will get an interactive quiz where options can be selected either by double-clicking or dragging them onto the placeholders. You can go to the player settings to see its code. That is nothing but a sandboxed webpage displayed in an iframe. See the player’s code in detail. Note that loading external JS/CSS libs by URL into the player is only possible in the web app version of A10fy; the security policy restrictions for Chromium extensions do not allow that. For convenience though, the following libraries are preloaded even in the extension: Bootstrap 5.3.x, KaTeX (with auto-render and copy-tex extensions), Liquid.JS, jQuery 3.7.x (to be replaced with version 4.x on its release), jQuery UI 1.14.x. Library versions are subject to change. Any other library should be bundled with the code of the player for it to be functional in Chromium extension version of A10fy.

Please note that currently the player’s state is not saved along with the chat, so it is best to use players for a short-to-medium length tasks that can be completed in one take.

You can also try a Crossword Player (see the preview and the sharing link) and an accompanying persona (sharing link). More players to follow. You are always welcome to design you own of course! 😉

Extension-specific feature: AI Assistant

While the chat is available in both web app and Chromium extension versions of A10fy, there are two features that available only in the extension: AI Assistant, Fuzzy Page Search and LLM query on specific DOM element.

AI Assistant feature is the ability to call LLM putting the web page in the current browser tab into context. By default, LLM will be given a screenshot and a simplified version of the HTML code of the page. Querying the page can be accomplished either by using the extension’s popup menu or with hotkeys (set them up using your browser’s extension hotkeys page, e.g. edge://extensions/shortcuts in Microsoft Edge). To dictate queries (commands) you’ll need to allow the extension to use your microphone on the settings page:

Try opening the popup menu on any web page and select either voice or text command:

After clicking the “Voice command” button you will hear a “ding” sound marking the beginning of the audio recording process. After dictating your command click the same button again to transmit the audio to LLM along with the page content. If you select “Text command” instead, you will be prompted to enter the command/query in the popup of the current tab. Some things to try out as commands:

Summarize the page and speak the summary.
Describe what you see on the page.
Scroll to the paragraph containing the answer to [some question here].
What notable resources are listed on the page?

The Assistant will either display the answer to your query in the actions pane of the side panel (make sure you have it opened in advance to see the message)

or will be dictated using your browser’s text-to-speech engine or will result in some modifications on the page itself. It is a good idea to steer the behaviour of the model by telling it in what way to provide the answer if it matters and is unclear from the main part of the query.

To change the model that powers the AI Assistant feature, go to the Models tab of the Settings page:

Extension-specific feature: Fuzzy Page Search

Another feature available only in the extension is the Fuzzy Page Search. It is a tool to search for pages in the browser history by their summarized content. For the page to appear in the fuzzy search results, its snapshot should be taken (via extension popup menu or using a keyboard shortcut). The model which is used for page summarization can be tweaked in the Models tab of the extension Settings page (the model used to produce vector text embeddings powering the fuzzy search is also present there).

To search for pages whose snapshots were previously taken, go to the corresponding tab of the extension side panel:

The input field marked with binocular is for the fuzzy search query, while the one marked with magnifying glass is for more conventional search. Most of the time entering a meaningful query into the “binocular” input field will suffice. Note that the complete textual content of the web pages is not currently saved; only a title, keywords, short summary and up to 3 vectors characterizing the page are stored. If the page content has changed since the last snapshot was taken, you will only have access to the current version of the page.

Extension-specific feature: LLM query on specific DOM element

This feature is suitable for technically advanced users of the extension. Earlier in this guide we have introduced an idea that “Custom Persona (i.e., system prompt) + Custom Player = POWER” 😊. With the A10fy Chromium extension you can get one step further by adding a specific page element content/properties into the mix, resulting in a Custom Action concept. Custom actions can be added in the corresponding tab of the Settings page:

You can define actions suitable e.g. for code or table DOM elements on the page or only for elements with graphical content or for some selected text on a page etc. These actions can be invoked through the browser’s context menu opened on a specific element or text selection. To be able to flexibly modify the system instruction for LLM to process the element correctly, you can use Liquid.JS template syntax enriched with some custom filters that enable further processing of the element’s DOM subtree. See details in the documentation.