Spaces:
Sleeping
Sleeping
| async () => { | |
| // set testFn() function on globalThis, so you html onlclick can access it | |
| globalThis.testFn = () => { | |
| document.getElementById('demo').innerHTML = "Hello?" | |
| }; | |
| const d3 = await import("https://cdn.jsdelivr.net/npm/d3@7/+esm"); | |
| globalThis.d3 = d3; | |
| globalThis.d3Fn = () => { | |
| d3.select('#viz').append('svg') | |
| .append('rect') | |
| .attr('width', 50) | |
| .attr('height', 50) | |
| .attr('fill', 'black') | |
| .on('mouseover', function(){d3.select(this).attr('fill', 'red')}) | |
| .on('mouseout', function(){d3.select(this).attr('fill', 'black')}); | |
| }; | |
| globalThis.testFn_out = (val,radio_c) => { | |
| // document.getElementById('demo').innerHTML = val | |
| console.log(val); | |
| // globalThis.d3Fn(); | |
| return([val,radio_c]); | |
| }; | |
| // Is this function well commented??? | |
| // globalThis.testFn_out_json = (val) => { | |
| // document.getElementById('demo2').innerHTML = JSON.stringify(val); | |
| // console.log(val); | |
| // globalThis.d3Fn(); | |
| // return(['string', {}]) | |
| // // return(JSON.stringify(val), JSON.stringify(val) ); | |
| // }; | |
| globalThis.testFn_out_json = (data) => { | |
| console.log(data); | |
| data_beam = data[0]; | |
| data_probs = data[1]; | |
| const idMapping = data_beam.reduce((acc, el, i) => { | |
| acc[el.id] = i; | |
| return acc; | |
| }, {}); | |
| let root; | |
| data_beam.forEach(el => { | |
| // Handle the root element | |
| if (el.parentId === null) { | |
| root = el; | |
| return; | |
| } | |
| // Use our mapping to locate the parent element in our data_beam array | |
| const parentEl = data_beam[idMapping[el.parentId]]; | |
| // Add our current el to its parent's `children` array | |
| parentEl.children = [...(parentEl.children || []), el]; | |
| }); | |
| // console.log(Tree(root)); | |
| // document.getElementById('d3_beam_search').innerHTML = Tree(root) | |
| d3.select('#d3_beam_search').html(""); | |
| d3.select('#d3_beam_search').append(function(){return Tree(root);}); | |
| //probabilities; | |
| // | |
| d3.select('#d3_text_grid').html(""); | |
| d3.select('#d3_text_grid').append(function(){return TextGrid(data_probs);}); | |
| // $('#d3_text_grid').html(TextGrid(data)) ; | |
| // $('#d3_beam_search').html(Tree(root)) ; | |
| return(['string', {}]) | |
| } | |
| // Copyright 2021 Observable, Inc. | |
| // Released under the ISC license. | |
| // https://observablehq.com/@d3/tree | |
| function Tree(data, { // data is either tabular (array of objects) or hierarchy (nested objects) | |
| path, // as an alternative to id and parentId, returns an array identifier, imputing internal nodes | |
| id = Array.isArray(data) ? d => d.id : null, // if tabular data, given a d in data, returns a unique identifier (string) | |
| parentId = Array.isArray(data) ? d => d.parentId : null, // if tabular data, given a node d, returns its parent’s identifier | |
| children, // if hierarchical data, given a d in data, returns its children | |
| tree = d3.tree, // layout algorithm (typically d3.tree or d3.cluster) | |
| sort, // how to sort nodes prior to layout (e.g., (a, b) => d3.descending(a.height, b.height)) | |
| label = d => d.name, // given a node d, returns the display name | |
| title = d => d.name, // given a node d, returns its hover text | |
| link , // given a node d, its link (if any) | |
| linkTarget = "_blank", // the target attribute for links (if any) | |
| width = 800, // outer width, in pixels | |
| height, // outer height, in pixels | |
| r = 3, // radius of nodes | |
| padding = 1, // horizontal padding for first and last column | |
| fill = "#999", // fill for nodes | |
| fillOpacity, // fill opacity for nodes | |
| stroke = "#555", // stroke for links | |
| strokeWidth = 2, // stroke width for links | |
| strokeOpacity = 0.4, // stroke opacity for links | |
| strokeLinejoin, // stroke line join for links | |
| strokeLinecap, // stroke line cap for links | |
| halo = "#fff", // color of label halo | |
| haloWidth = 3, // padding around the labels | |
| curve = d3.curveBumpX, // curve for the link | |
| } = {}) { | |
| // If id and parentId options are specified, or the path option, use d3.stratify | |
| // to convert tabular data to a hierarchy; otherwise we assume that the data is | |
| // specified as an object {children} with nested objects (a.k.a. the “flare.json” | |
| // format), and use d3.hierarchy. | |
| const root = path != null ? d3.stratify().path(path)(data) | |
| : id != null || parentId != null ? d3.stratify().id(id).parentId(parentId)(data) | |
| : d3.hierarchy(data, children); | |
| // Sort the nodes. | |
| if (sort != null) root.sort(sort); | |
| // Compute labels and titles. | |
| const descendants = root.descendants(); | |
| const L = label == null ? null : descendants.map(d => label(d.data, d)); | |
| // Compute the layout. | |
| const descWidth = 10; | |
| // console.log('descendants', descendants); | |
| const realWidth = descWidth * descendants.length | |
| const totalWidth = (realWidth > width) ? realWidth : width; | |
| const dx = 25; | |
| const dy = totalWidth / (root.height + padding); | |
| tree().nodeSize([dx, dy])(root); | |
| // Center the tree. | |
| let x0 = Infinity; | |
| let x1 = -x0; | |
| root.each(d => { | |
| if (d.x > x1) x1 = d.x; | |
| if (d.x < x0) x0 = d.x; | |
| }); | |
| // Compute the default height. | |
| if (height === undefined) height = x1 - x0 + dx * 2; | |
| // Use the required curve | |
| if (typeof curve !== "function") throw new Error(`Unsupported curve`); | |
| const parent = d3.create("div"); | |
| const body = parent.append("div") | |
| .style("overflow-x", "scroll") | |
| .style("-webkit-overflow-scrolling", "touch"); | |
| const svg = body.append("svg") | |
| .attr("viewBox", [-dy * padding / 2, x0 - dx, totalWidth, height]) | |
| .attr("width", totalWidth) | |
| .attr("height", height) | |
| .attr("style", "max-width: 100%; height: auto; height: intrinsic;") | |
| .attr("font-family", "sans-serif") | |
| .attr("font-size", 12); | |
| svg.append("g") | |
| .attr("fill", "none") | |
| .attr("stroke", stroke) | |
| .attr("stroke-opacity", strokeOpacity) | |
| .attr("stroke-linecap", strokeLinecap) | |
| .attr("stroke-linejoin", strokeLinejoin) | |
| .attr("stroke-width", strokeWidth) | |
| .selectAll("path") | |
| .data(root.links()) | |
| .join("path") | |
| // .attr("stroke", d => d.prob > 0.5 ? 'red' : 'blue' ) | |
| // .attr("fill", "red") | |
| .attr("d", d3.link(curve) | |
| .x(d => d.y) | |
| .y(d => d.x)); | |
| const node = svg.append("g") | |
| .selectAll("a") | |
| .data(root.descendants()) | |
| .join("a") | |
| .attr("xlink:href", link == null ? null : d => link(d.data, d)) | |
| .attr("target", link == null ? null : linkTarget) | |
| .attr("transform", d => `translate(${d.y},${d.x})`); | |
| node.append("circle") | |
| .attr("fill", d => d.children ? stroke : fill) | |
| .attr("r", r); | |
| title = d => (d.name + ( d.prob)); | |
| if (title != null) node.append("title") | |
| .text(d => title(d.data, d)); | |
| if (L) node.append("text") | |
| .attr("dy", "0.32em") | |
| .attr("x", d => d.children ? -6 : 6) | |
| .attr("text-anchor", d => d.children ? "end" : "start") | |
| .attr("paint-order", "stroke") | |
| .attr("stroke", 'white') | |
| .attr("fill", d => d.data.prob == 1 ? ('red') : ('black') ) | |
| .attr("stroke-width", haloWidth) | |
| .text((d, i) => L[i]); | |
| body.node().scrollBy(totalWidth, 0); | |
| return svg.node(); | |
| } | |
| function TextGrid(data, div_name, { | |
| width = 640, // outer width, in pixels | |
| height , // outer height, in pixels | |
| r = 3, // radius of nodes | |
| padding = 1, // horizontal padding for first and last column | |
| // text = d => d[2], | |
| } = {}){ | |
| // console.log("TextGrid", data); | |
| // Compute the layout. | |
| const dx = 10; | |
| const dy = 10; //width / (root.height + padding); | |
| const marginTop = 20; | |
| const marginRight = 20; | |
| const marginBottom = 30; | |
| const marginLeft = 30; | |
| // Center the tree. | |
| let x0 = Infinity; | |
| let x1 = -x0; | |
| topk = 10; | |
| word_length = 20; | |
| const rectWidth = 60; | |
| const rectTotal = 70; | |
| wval = 0 | |
| const realWidth = rectTotal * data.length | |
| const totalWidth = (realWidth > width) ? realWidth : width; | |
| // root.each(d => { | |
| // if (d.x > x1) x1 = d.x; | |
| // if (d.x < x0) x0 = d.x; | |
| // }); | |
| // Compute the default height. | |
| // if (height === undefined) height = x1 - x0 + dx * 2; | |
| if (height === undefined) height = topk * word_length + 10; | |
| const parent = d3.create("div"); | |
| // parent.append("svg") | |
| // .attr("width", width) | |
| // .attr("height", height) | |
| // .style("position", "absolute") | |
| // .style("pointer-events", "none") | |
| // .style("z-index", 1); | |
| // const svg = d3.create("svg") | |
| // // svg = parent.append("svg") | |
| // .attr("viewBox", [-dy * padding / 2, x0 - dx, width, height]) | |
| // .attr("width", width) | |
| // .attr("height", height) | |
| // .attr("style", "max-width: 100%; height: auto; height: intrinsic;") | |
| // .attr("font-family", "sans-serif") | |
| // .attr("font-size", 10); | |
| // div.data([1, 2, 4, 8, 16, 32], d => d); | |
| // div.enter().append("div").text(d => d); | |
| const body = parent.append("div") | |
| .style("overflow-x", "scroll") | |
| .style("-webkit-overflow-scrolling", "touch"); | |
| const svg = body.append("svg") | |
| .attr("width", totalWidth) | |
| .attr("height", height) | |
| .style("display", "block") | |
| .attr("font-family", "sans-serif") | |
| .attr("font-size", 10); | |
| data.forEach(words_list => { | |
| // console.log(wval, words_list); | |
| words = words_list[2]; // {'t': words_list[2], 'p': words_list[1]}; | |
| scores = words_list[1]; | |
| words_score = words.map( (x,i) => {return {t: x, p: scores[i]}}) | |
| // console.log(words_score); | |
| // svg.selectAll("text").enter() | |
| // .data(words) | |
| // .join("text") | |
| // .text((d,i) => (d)) | |
| // .attr("x", wval) | |
| // .attr("y", ((d,i) => (20 + i*20))) | |
| var probs = svg.selectAll("text").enter() | |
| .data(words_score).join('g'); | |
| probs.append("rect") | |
| // .data(words) | |
| .attr("x", wval) | |
| .attr("y", ((d,i) => ( 10+ i*20))) | |
| .attr('width', rectWidth) | |
| .attr('height', 15) | |
| .attr("color", 'gray') | |
| .attr("fill", "gray") | |
| // .attr("fill-opacity", "0.2") | |
| .attr("fill-opacity", (d) => (d.p)) | |
| .attr("stroke-opacity", 0.8) | |
| .append("svg:title") | |
| .text(function(d){return d.t+":"+d.p;}); | |
| probs.append("text") | |
| // .data(words) | |
| .text((d,i) => (d.t)) | |
| .attr("x", wval) | |
| .attr("y", ((d,i) => (20 + i*20))) | |
| // .attr("fill", 'white') | |
| .attr("font-weight", 700); | |
| wval = wval + rectTotal; | |
| }); | |
| body.node().scrollBy(totalWidth, 0); | |
| // return svg.node(); | |
| return parent.node(); | |
| } | |
| } | |
| // define('viz', ['d3'], function (d3) { | |
| // function draw(container) { | |
| // d3.select(container).append("svg").append('rect').attr('id', 'viz_rect').attr('width', 50).attr('height', 50); | |
| // } | |
| // return draw; | |
| // }); | |
| // console.log("HERE!") | |
| // element.append('Loaded 😄 '); | |
| // variable2='hello'; | |
| // draw('.gradio-container') | |
| // function transform_beamsearch(data){ | |
| // const idMapping = data.reduce((acc, el, i) => { | |
| // acc[el.id] = i; | |
| // return acc; | |
| // }, {}); | |
| // let root; | |
| // data.forEach(el => { | |
| // // Handle the root element | |
| // if (el.parentId === null) { | |
| // root = el; | |
| // return; | |
| // } | |
| // // Use our mapping to locate the parent element in our data array | |
| // const parentEl = data[idMapping[el.parentId]]; | |
| // // Add our current el to its parent's `children` array | |
| // parentEl.children = [...(parentEl.children || []), el]; | |
| // }); | |
| // // console.log(Tree(root, { label: d => d.name,})); | |
| // console.log(root); | |
| // // $('#d3_beam_search').html(Tree(root)) ; | |
| // return root; | |
| // } | |
| // var gradioContainer = document.querySelector('.gradio-container'); | |
| // gradioContainer.insertBefore(container, gradioContainer.firstChild); | |