✨ feat: add antd token support

.github/workflows/main.yml

@@ -0,0 +1,32 @@
+on:
+  schedule: 
+    # runs once a week on sunday
+    - cron: "55 23 * * 0"
+jobs:
+  # This workflow contains a single job called "traffic"
+  traffic:
+    # The type of runner that the job will run on
+    runs-on: ubuntu-latest
+
+    # Steps represent a sequence of tasks that will be executed as part of the job
+    steps:
+    # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
+    - uses: actions/checkout@v2
+      with:
+        ref: "traffic"
+
+    # Calculates traffic and clones and stores in CSV file
+    - name: GitHub traffic 
+      uses: sangonzal/[email protected]
+      env:
+        TRAFFIC_ACTION_TOKEN: ${{ secrets.TRAFFIC_ACTION_TOKEN }} 
+
+
+    # Commits files to repository
+    - name: Commit changes
+      uses: EndBug/add-and-commit@v4
+      with:
+        author_name: Gerschel
+        message: "GitHub traffic"
+        add: "./traffic/*"
+        ref: "traffic"  # commits to branch "traffic" 

.gitignore

@@ -0,0 +1,39 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+**/node_modules
+npm-debug.log*
+yarn-error.log
+package-lock.json
+
+# production
+**/dist
+/plugins/
+/es
+/lib
+/logs
+
+# misc
+.DS_Store
+.eslintcache
+.husky
+
+# umi
+/src/.umi
+/src/.umi-production
+/src/.umi-test
+/.env.local
+
+# ide
+.idea
+.vscode
+.history
+*.log
+functions/*
+lambda/mock/index.js
+.temp/**
+
+# test
+**/test-output
+config.yml
+

javascript/background.js

@@ -0,0 +1,58 @@
+class InjectBackground{
+    constructor(){
+        this.image;
+    }
+    async init(selector="div[class^=mx-auto][class*=container]"){
+        this.element = undefined
+        while(true){
+            this.element = gradioApp().querySelector(selector)
+            if (this.element){
+                break
+            }
+            await delay(500)
+        }
+        this.element.setAttribute("style", "background-image: url(file=static/background.png); background-size: contain; background-attachment: fixed; background-position: center; background-repeat: no-repeat")
+    }
+    removeStyle(){
+        this.element.removeStyle()
+    }
+    removeImage(){
+        this.element.style['background-image'] = ""
+    }
+    updateImage(path){
+        this.element.style['background-image'] = `url(file=${path})`
+    }
+    //destroy not necessarily needed at this time, it's to keep the api similar
+    destroy(){
+        this.removeStyle()
+    }
+    async refreshImage(file_name){
+        setTimeout(location.reload(), 200)
+        //this.updateImage("static/background.png")
+        console.log(file_name)
+        return file_name
+    }
+}
+/*
+element.style {
+    background-image: url(file=logo.png);
+    background-size: cover;
+    background-attachment: fixed;
+    background-position: center;
+}
+*/
+
+let injectBackground = new InjectBackground()
+async function registerInjectHandler(){
+    await injectBackground.init()
+    while(true){
+        if(injectBackground.element){
+            break
+        }
+        await delay(500)
+    }
+    qkcssImagemap.injectBackground = injectBackground
+}
+
+function delay(ms){return new Promise(resolve => setTimeout(resolve, ms))}
+document.addEventListener("DOMContentLoaded", async function (){await registerInjectHandler()})

javascript/favicon.js

@@ -0,0 +1,22 @@
+class FaviconHandler {
+    static setFavicon() {
+        const link = document.createElement('link');
+        link.rel = 'icon';
+        link.type = 'image/svg+xml';
+        link.href = getComputedStyle(gradioApp().querySelector('.icon-container')).backgroundImage.replace(/^url\("|"\)$/g, '');
+        document.getElementsByTagName('head')[0].appendChild(link);
+    }
+    static observeGradioApp() {
+        const observer = new MutationObserver(() => {
+            const iconContainer = gradioApp().querySelector('.icon-container');
+            if (iconContainer) {
+                observer.disconnect();
+                FaviconHandler.setFavicon();
+            }
+        });
+        observer.observe(gradioApp(), { childList: true, subtree: true });
+    }
+}
+document.addEventListener("DOMContentLoaded", () => {
+    FaviconHandler.observeGradioApp();
+});

javascript/matrixfx.js

@@ -0,0 +1,100 @@
+class MatrixEffect{
+    constructor(){
+        this.matrixCanvas = document.createElement("canvas")
+        this.matrixCanvas.setAttribute("style", "position: fixed;")
+        gradioApp().querySelector("div[class*=container]:not([class^=modal])").insertAdjacentElement('afterbegin', this.matrixCanvas)
+    }
+
+    async initialize(){
+        while(!gradioApp().querySelector('canvas')){
+            await delay(300)
+        }
+        // Initialising the canvas
+        this.ctx = this.matrixCanvas.getContext('2d');
+
+        // Setting the width and height of the canvas
+        this.matrixCanvas.width = window.innerWidth;
+        this.matrixCanvas.height = window.innerHeight;
+
+        // Setting up the letters
+        this.letters = 'ABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZ';
+        this.letters = this.letters.split('');
+
+        // Setting up the columns
+        this.fontSize = 10,
+        this.columns = this.matrixCanvas.width / this.fontSize;
+
+        // Setting up the drops
+        this.drops = [];
+        for (var i = 0; i < this.columns; i++) {
+            this.drops[i] = 1;
+        }
+        this.running = true;
+
+        //timer
+        this.then = Date.now();
+        this.fps = 20;
+        this.fpsInterval = 1000/this.fps;
+
+
+    // Setting up the draw function
+        this.draw = () => {
+            this.now = Date.now();
+            this.elapsed = this.now - this.then;
+            if (this.elapsed > this.fpsInterval){
+                this.then = this.now - (this.elapsed % this.fpsInterval);
+
+                this.ctx.fillStyle = 'rgba(0, 0, 0, .1)';
+                this.ctx.fillRect(0, 0, this.matrixCanvas.width, this.matrixCanvas.height);
+                for (var i = 0; i < this.drops.length; i++) {
+                    text = this.letters[Math.floor(Math.random() * this.letters.length)];
+                    this.ctx.fillStyle = '#0f0';
+                    this.ctx.fillText(text, i * this.fontSize, this.drops[i] * this.fontSize);
+                    this.drops[i]++;
+                    if (this.drops[i] * this.fontSize > this.matrixCanvas.height && Math.random() > .95) {
+                        this.drops[i] = 0;
+                    }
+                }
+            }
+            if (this.running){
+                    requestAnimationFrame(this.draw)
+            }
+        }
+    }
+
+    destroy(){
+        this.running = false;
+        //clearInterval(this.Interval)
+        this.matrixCanvas.remove()
+    }
+}
+
+let matrixEffect;
+
+async function registerMatrixToHandler(){
+    await delay(1000);
+    while(qkcssFXMap == undefined){
+        await delay(500)
+    }
+    qkcssFXMap["matrixfx"] = [launchMatrixEffect, matrixEffect];
+}
+
+async function launchMatrixEffect(){
+    await delay(1000)
+    while (!gradioApp().querySelector("div[class*=container]:not([class^=modal])")){
+        await delay(300);
+    }
+    // Loop the animation
+    matrixEffect = new MatrixEffect()
+    //Shortciruited it
+    qkcssFXMap["matrixfx"][1] = matrixEffect
+    await delay(500)
+    matrixEffect.initialize()
+    matrixEffect.Interval = matrixEffect.draw();
+    //matrixEffect.Interval = setInterval(matrixEffect.draw, 33);
+}
+
+function delay(ms){return new Promise(resolve => setTimeout(resolve, ms))}
+//document.addEventListener("DOMContentLoaded", async function() {await launchMatrixEffect()})
+document.addEventListener("DOMContentLoaded", async function() {await registerMatrixToHandler()})
+

javascript/quickcss.js

@@ -0,0 +1,72 @@
+function quickcssFormatRule(val, ele, colorsSize){
+    //async  is not needed, just trying to debug some error from colorpicker
+    ele = parseInt(ele)
+    //get sheet from style tag
+    let quickcssSheet =  document.documentElement.querySelector("gradio-app").shadowRoot.querySelector("style").sheet
+    //get it's rules
+    let quickcssCssr = quickcssSheet.cssRules
+    //convert to array for finding index
+    let quickcssCssrArray = Array.from(quickcssCssr)
+    //use custom target to find index
+    let quickcssTarget =  quickcssCssrArray.find( item => item.cssText.includes("quickcss_target"))
+    let quickcssTargetIndex =  quickcssCssrArray.indexOf(quickcssTarget)
+    //Pull rule out
+    let quickcssRuleAsString =  quickcssCssr[quickcssTargetIndex].cssText.toString()
+    //splitter for rule targets and body
+    let ruleSplitIndex = quickcssRuleAsString.indexOf("{")
+    //Target of rule
+    let ruleTargets = quickcssRuleAsString.slice(0, ruleSplitIndex)
+    //Body of rule
+    let quickcssRuleBody =  quickcssRuleAsString.slice(ruleSplitIndex)
+    //Rule body edit
+    let asSplit =  quickcssRuleBody.split(";")
+    let endStr =  asSplit.slice(parseInt(colorsSize)).join(";")
+    //Edit to element position, index and length given as string via hiddenvals components
+    while (asSplit.length > parseInt(colorsSize))
+    {
+        asSplit.pop()
+    }
+    let asArray = new Array
+     asSplit.forEach( e => {asArray.push(e.split(":"))})
+    let stringarray = new Array
+     asArray.forEach( (e, i) => {stringarray.push( i==ele ? `${e[0]}: ${val}`: `${e[0]}: ${e[1]}`)})
+    stringarray = stringarray.join(";") + `;${endStr}`
+    let cssRule = ruleTargets + stringarray
+    //Delete old rule at
+    quickcssSheet.deleteRule(quickcssTargetIndex)
+    //insert (as in add at same location)
+    quickcssSheet.insertRule(cssRule, quickcssTargetIndex)
+    //returns must equal inputs size, so outputs must matchsize, python fn hijacks for finishing save data
+    return [stringarray, "", ""]
+}
+
+//Register js fx's
+//they must support a destroy method
+
+qkcssFXMap = {};
+
+function launchEffect(filename){
+    qkcssFXMap[filename][0]()
+}
+
+function destroyEffect(filename){
+    qkcssFXMap[filename][1].destroy()
+}
+
+//Register js image injectors
+qkcssImagemap = {};
+
+function launchImage(name){
+    qkcssImagemap[name].register()
+}
+function removeImage(name){
+    qkcssImagemap[name].destroy()
+}
+function updateImage(name, new_name){
+    //notimplemented hidden component to send name?
+    qkcssImagemap[name].updateImage(new_name)
+}
+async function refreshImage(name){
+    await qkcssImagemap[name].refreshImage()
+    return name
+}