Display math equations in Azure AI Studio Chat

Your mileage might vary. This is a dirty trick, likely to break the in­ter­net, but it kind of works.

Mathematical equa­tions are dis­played in LaTex for­mat, ba­si­cally un­read­able.

I have tried to make GPT-4o to for­mat them in a hu­man read­able way in the Azure AI Studio Chat Playground, but failed.

So it is like this:

$$
P(A|B) = \frac{P(B|A) \cdot P(A)}{P(B)}
$$

You in­stead might want some­thing like this:

The trick is to in­ject Javascript code that ex­e­cutes on a timer and uses MathJax to trans­form the Latex code to an im­age.

There are prob­a­bly bet­ter ways to do it. Here is what I did:

1. Install Tampermonkey
2. Click on the extension and pick Create a new script
3. Paste the script below (modified from this thread)

// ==UserScript==
// @name         ChatGPT LaTeX Display
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://chat.openai.com/*
// @match        https://ai.azure.com/playground/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=openai.com
// @grant        GM_setValue
// @run-at       document-start
// ==/UserScript==


//Prompt should end with>>> Please format any equations in LaTeX.
//TODO: Intercept WebSocket messages and re-typeset every second until the chatbot is done talking.


(function() {
    'use strict';

    console.log("Getting ready to set up MathJax");



    let tmpMathJax = {
        tex: {
            inlineMath: [['$', '$'], ['\\(', '\\)']],
            displayMath: [ ['$$','$$'], ['\[','\]'] ]
        }
    };

    var prescript = document.createElement('script');
    prescript.type = 'text/javascript';
    prescript.innerText = `
    MathJax = {
        tex: {
            inlineMath: [['$', '$'], ['\\(', '\\)']],
            displayMath: [ ['$$','$$'], ['\[','\]'] ]
        }
    };`;
    prescript.onload = function() {
        console.log("MathJax customizations loaded");
    }
    document.getElementsByTagName('head')[0].appendChild(prescript);



    console.log("Setting up MathJax");

    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.async = true;
    script.onload = function() {
        console.log("MathJax loaded!!");

        setInterval(function() {
            console.log("Re-typesetting...");
            MathJax.typeset();
        },5000);
    }
    script.src = "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js";
    document.getElementsByTagName('head')[0].appendChild(script);

})();

Caveats:

1. Running something on a timer is ugly. In this case you have to wait 5 seconds to see the nice formulas.
2. It doesn’t work correctly for some inline formulas.

All in all, it is a dirty hack. Perhaps it could be made ‘more work­ing’, but maybe there is a bet­ter way al­togheter.

Tags

• AI