Open the demo in new window can open the designer
This demo showcases the AI-assisted formula generation and explanation feature, designed to simplify creating and understanding formulas in a spreadsheet-like environment.
The feature includes:
AI Formula Generation: Automatically generate formulas based on user input or context, such as "sum of amount" or "average of sales"
Formula Explanation: Offer detailed, step-by-step explanations for generated or existing formulas to help users grasp their logic and application.
To use this feature, follow these steps:
Input your query (e.g., "The table 'table1' contains the sales data of each salesperson. Please give me a formula to sum the sales of each salesperson and then give the salesperson with the highest sales.").
Click the "Generate Formula" button to receive an AI-suggested formula tailored to your input.
Review the formula and apply it directly to your spreadsheet.
For any formula in formula editor panel, click "Explain Formula" to see a breakdown of how it works.
This feature empowers users to work more efficiently and confidently with formulas, regardless of their prior spreadsheet expertise.
AI-Generated Content Disclaimer
1. Content Generation Risks
This service utilizes third-party AI models injected by users to generate outputs. Results may contain inaccuracies, omissions,或 misleading content due to inherent limitations in model architectures and training data. While we implement prompt engineering and technical constraints to optimize outputs, we cannot eliminate all error risks stemming from fundamental model deficiencies.
2. User Verification Obligations
By using this service, you acknowledge and agree to:
Conduct manual verification of all generated content
Refrain from using unvalidated outputs in high-risk scenarios (legal, medical, financial, etc.)
Hold us harmless for any direct/indirect damages caused by reliance on generated content
3. Technical Limitations
We disclaim responsibility for:
Output failures caused by third-party model defects or logic errors
Unsuccessful error recovery attempts through fault-tolerant procedures
Technical constraints inherent in current AI technologies
4. Intellectual Property Compliance
You must ensure:
Injected models/content do not infringe third-party rights
No illegal/sensitive material is processed through the service
Compliance with model providers' IP agreements
5. Agreement Updates
We reserve the right to modify these terms to align with:
Technological advancements (e.g. new AI safety protocols)
Regulatory changes (e.g. updated AI governance frameworks)
Service architecture improvements
<template>
<gc-spread-sheets-designer
class="demo"
v-if="showDesigner"
@designerInitialized="initDesigner"
/>
<div class="sample-tutorial" v-else>
<gc-spread-sheets id="demo-host" @workbookInitialized="initSpread" />
<div id="panel">
<div id="header">
<div id="save"></div>
<div id="location"></div>
</div>
<div id="editor"></div>
</div>
</div>
</template>
<script setup>
import GC from "@mescius/spread-sheets";
import "@mescius/spread-sheets-print";
import "@mescius/spread-sheets-shapes";
import "@mescius/spread-sheets-charts";
import "@mescius/spread-sheets-reportsheet-addon";
import "@mescius/spread-sheets-tablesheet";
import "@mescius/spread-sheets-ganttsheet";
import "@mescius/spread-sheets-formula-panel";
import "@mescius/spread-sheets-ai-addon";
import "@mescius/spread-sheets-vue";
import "@mescius/spread-sheets-designer-resources-en";
import "@mescius/spread-sheets-designer-vue";
import { ref } from "vue";
import "$DEMOROOT$/spread/source/js/react_vue/license.js";
import { registerlic } from "$DEMOROOT$/spread/source/js/designer/react_vue/license.js";
registerlic(GC);
const showDesigner = top === window;
const spreadRef = ref(null);
const designerRef = ref(null);
function injectAI(spread) {
const serverCallback = async (requestBody) => {
const response = await fetch(getAIApiUrl(), {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(requestBody)
});
if (response.status === 429) {
alert('The server is busy, please try again later.');
return;
}
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response;
};
spread.injectAI(serverCallback);
}
const getAIApiUrl = () => {
return (
window.location.href.match(/http.+spreadjs\/demos\//)[0] +
"server/api/queryAI"
);
};
const toColumnIndex = (index) => {
let column = "";
while (index >= 0) {
column = String.fromCharCode((index % 26) + 65) + column;
index = Math.floor(index / 26) - 1;
}
return column;
};
const initSpread = (spread) => {
spread.suspendPaint();
spread.options.allowDynamicArray = true;
injectAI(spread);
var sheet = spread.sheets[0];
if (!showDesigner) {
const formulaEditor = new GC.Spread.Sheets.FormulaPanel.FormulaEditor(
document.getElementById("editor")
);
formulaEditor.attach(spread);
const save_btn = document.getElementById("save");
save_btn.addEventListener("click", () => {
formulaEditor
.commandManager()
.execute({ cmd: "commitContentToActiveCell" });
});
const location = document.getElementById("location");
spread.bind("ActiveCellChanged", (eventType, args) => {
location.innerText = `${spread.getActiveSheet().name()}>${toColumnIndex(
args.col
)}${args.row + 1}`;
});
}
sheet.setValue(0, 0, "Grade");
sheet.setValue(0, 6, 72);
sheet.setFormula(
0,
1,
'=LET(score, G1, IF(score >= 90, "A", IF(score >= 80, "B", IF(score >= 70, "C", IF(score >= 60, "D", "F")))))'
);
sheet.setValue(1, 0, "Most Frequent");
sheet.setArray(1, 6, [[1, 2, 6, 6, 6, 5]]);
sheet.setFormula(
1,
1,
'=LET(data, G2:L2, unique_data, UNIQUE(data), count_data, COUNTIF(data, unique_data), max_count, MAX(count_data), most_frequent, INDEX(unique_data, MATCH(max_count, count_data, 0)), IF(max_count > 1, most_frequent, ""))'
);
sheet.setValue(2, 0, "GUID");
sheet.setFormula(
2,
1,
'=CONCATENATE(DEC2HEX(RANDBETWEEN(0, 4294967295), 8), "-", DEC2HEX(RANDBETWEEN(0, 65535), 4), "-", DEC2HEX(RANDBETWEEN(16384, 20479), 4), "-", DEC2HEX(RANDBETWEEN(32768, 49151), 4), "-", DEC2HEX(RANDBETWEEN(0, 65535), 4), DEC2HEX(RANDBETWEEN(0, 4294967295), 8))'
);
sheet.setActiveCell(0, 1);
if (!showDesigner) {
document.getElementById("location").innerText = 'Sheet1>B1';
}
sheet.setColumnWidth(0, 100);
const dataSource = [
["name", "product", "date", "amount", "price", "sales"],
["chris", "desk", new Date("2020-10-08T16:00:00.000Z"), 5, 199, 995],
["radow", "pen", new Date("2020-09-15T16:00:00.000Z"), 2, 5, 10],
["peyton", "pencil", new Date("2021-06-22T16:00:00.000Z"), 6, 1.5, 9],
["johnson", "chair", new Date("2021-07-19T16:00:00.000Z"), 7, 68, 476],
["vic", "notebook", new Date("2021-01-13T16:00:00.000Z"), 7, 3.2, 22.4],
["lan", "desk", new Date("2021-03-12T16:00:00.000Z"), 9, 199, 1791],
["chris", "pen", new Date("2021-03-06T16:00:00.000Z"), 4, 5, 20],
["chris", "pencil", new Date("2020-09-02T16:00:00.000Z"), 10, 1.5, 15],
["radow", "chair", new Date("2020-08-09T16:00:00.000Z"), 3, 68, 204],
["peyton", "notebook", new Date("2021-02-08T16:00:00.000Z"), 9, 3.2, 28.8],
["johnson", "desk", new Date("2021-07-03T16:00:00.000Z"), 7, 199, 1393],
["vic", "pen", new Date("2021-06-27T16:00:00.000Z"), 8, 5, 40],
["lan", "pencil", new Date("2020-10-10T16:00:00.000Z"), 2, 1.5, 3],
["chris", "chair", new Date("2021-03-04T16:00:00.000Z"), 2, 68, 136],
["chris", "notebook", new Date("2021-02-21T16:00:00.000Z"), 11, 3.2, 35.2],
["radow", "desk", new Date("2021-06-03T16:00:00.000Z"), 6, 199, 1194],
];
sheet.setArray(5, 0, dataSource);
sheet.tables.add("table1", 5, 0, 17, 6);
spread.resumePaint();
};
const initDesigner = (designer) => {
designerRef.value = designer;
initSpread(designer.getWorkbook());
designer.setData("formulaEditorPanel_Visible", true);
designer.refresh();
};
</script>
<style scoped>
#app {
height: 98vh;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.demo {
width: 100%;
height: 100%;
overflow: hidden;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
display: flex;
flex-direction: row;
}
#demo-host {
width: 69vw;
height: 100%;
flex-grow: 1;
}
#panel {
margin-left: 10px;
width: 30vw;
display: flex;
flex-direction: column;
}
#header {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
#save {
margin-left: 7px;
height: 30px;
width: 30px;
cursor: pointer;
background-position: center;
background-repeat: no-repeat;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNiIgaGVpZ2h0PSIyNiI+PGcgZmlsbD0iIzY5Njk2OSIgZmlsbC1ydWxlPSJub256ZXJvIj48cGF0aCBzdHJva2U9IiM2NjYiIHN0cm9rZS13aWR0aD0iLjciIGQ9Ik0xMC44NzIgMnEuNTgyIDAgLjkzNS4yOS4zNTUuMjg4LjM1NC42MjQtLjAwMS4yNy0uMTc2LjQ0N2EuNjIuNjIgMCAwIDEtLjQ1NC4xNzcuNTcuNTcgMCAwIDEtLjM5Mi0uMTM0LjQyLjQyIDAgMCAxLS4xNTMtLjMyM3EwLS4xMi4xMDEtLjI5OS4xLS4xNzUuMS0uMjMzYS4yLjIgMCAwIDAtLjA2Ni0uMTU4cS0uMDk2LS4wNzUtLjI4Ny0uMDc1LS40ODggMC0uODcuMjk5LS41MTUuNDAxLS45MjYgMS4yNS0uMjEuNDM4LS43NjQgMi4yMDFoMS4xMzdsLS4xNDQuNDk2SDguMTVMNy4zIDkuODQ0cS0uNTYzIDIuMTY0LTEuMTI3IDMuMzU4LS44MSAxLjY3LTEuNzM4IDIuMzAzUTMuNzMgMTYgMy4wMjIgMTZxLS40NjggMC0uNzgzLS4yNzFBLjU5LjU5IDAgMCAxIDIgMTUuMjQ1cTAtLjI0MS4xOTYtLjQyMWEuNjguNjggMCAwIDEgLjQ3My0uMTc2cS4yMSAwIC4zNTMuMTI2YS4zOC4zOCAwIDAgMSAuMTQzLjI5NHEwIC4xNjYtLjE2Mi4zMDgtLjEyNC4xMDEtLjEyNC4xNTggMCAuMDY1LjA1Ny4xMDIuMDY4LjA1Ny4yMS4wNTcuMzM0IDAgLjY5Ny0uMjA2LjM2My0uMjA1LjY1LS42MDYuMjg1LS40MDIuNTQ0LTEuMTU2LjEwNS0uMzE4LjU3My0yLjA4MWwxLjMzNy01LjA4Mkg1LjYxbC4xMDUtLjQ5NXEuNjQgMCAuODkzLS4wODkuMjUzLS4wODguNDYzLS4zMzIuMjEtLjI0MS41NTQtLjkxNC40NDktLjg5NC44NjktMS4zODkuNTYzLS42NzEgMS4xOTQtMS4wMDguNjMtLjMzNiAxLjE4NC0uMzM1Wm00LjQxMSAzLjg4MXEuMzI2IDAgLjUyMS4xNzYuMTk2LjE3Ny4xOTYuNDE5IDAgLjI5LS4xMTQuMzkzYS43MS43MSAwIDAgMS0uNDg3LjE4NnEtLjE2NC4wMDItLjM1NC0uMDY2LS4zNTMtLjEyLS40NzgtLjEyLS4xOSAwLS40MzkuMjA0LS40NzguMzk0LTEuMTM3IDEuNTFsLjYzMiAyLjU4NnEuMTQzLjU5Ny4yNDMuNzEyLjEuMTE5LjE5NS4xMTguMTYyIDAgLjM4My0uMTc2YTMuMSAzLjEgMCAwIDAgLjcyNi0uODk2bC4yNjcuMTI5YTQuOCA0LjggMCAwIDEtMS4yMzMgMS40NzRxLS40Mi4zMjYtLjcxNS4zMjYtLjQzLjAwMS0uNjg4LS40NjYtLjE2Mi0uMjk3LS42Ny0yLjUyOC0xLjE5MyAyLjAzNS0xLjkxOCAyLjYyLS40NjguMzc0LS45MDcuMzc0YS44Ni44NiAwIDAgMS0uNTY0LS4yMTUuNTguNTggMCAwIDEtLjE4Mi0uNDQ4LjU2OC41NjggMCAwIDEgLjU4My0uNTc3cS4yNDggMCAuNTI2LjI0My4yLjE3Ni4zMDUuMTc2LjA5NSAwIC4yMzktLjEyLjM2My0uMjkuOTgzLTEuMjM3LjYyLS45NDYuODEzLTEuMzY2YTEwMCAxMDAgMCAwIDAtLjUwNy0xLjkzMmMtLjEyMi0uMzItLjI3Ny0uNTUyLS40NjgtLjY4NXEtLjI4Ny0uMi0uODMxLS4xOTktLjE4MSAwLS40MS4wMDl2LS4yNzFsMi4wNTQtLjM1M3EuMzcuMzkxLjU2My43ODMuMTQyLjI3LjQ1OCAxLjQxOGwuNjc3LS45ODlxLjI2OS0uMzY0LjY1LS42OS4zODItLjMyOC42NzktLjQzOGEuOTYuOTYgMCAwIDEgLjQxLS4wODRaIi8+PHBhdGggZD0ibTExLjcxMiAyNS4yNi0uNjE3LS42MDdMNCAxOC43MjZsMS40NDItMS40ODYgNi4yNyA1LjE1NUwyMy42NiAxMCAyNSAxMS4yMzYgMTIuMzAxIDI0LjY1MyIvPjwvZz48L3N2Zz4=);
}
#save:hover {
transform: scale(1.1);
}
#location {
margin-left: 12px;
line-height: 30px;
font-size: 18px;
}
#editor {
height: calc(100% - 30px);
}
</style>
<!DOCTYPE html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>SpreadJS VUE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/vue3/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/vue3/node_modules/@mescius/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css">
<script src="$DEMOROOT$/en/vue3/node_modules/systemjs/dist/system.src.js"></script>
<script src="./systemjs.config.js"></script>
<script src="./compiler.js" type="module"></script>
<script>
var System = SystemJS;
System.import("./src/app.js");
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
(function (global) {
SystemJS.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
packageConfigPaths: [
'./node_modules/*/package.json',
"./node_modules/@mescius/*/package.json",
"./node_modules/@babel/*/package.json",
"./node_modules/@vue/*/package.json"
],
map: {
'vue': "npm:vue/dist/vue.esm-browser.js",
'tiny-emitter': 'npm:tiny-emitter/index.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
"systemjs-babel-build": "npm:systemjs-plugin-babel/systemjs-babel-browser.js",
'@mescius/spread-sheets-designer-resources-en': 'npm:@mescius/spread-sheets-designer-resources-en/index.js',
'@mescius/spread-sheets-designer-vue': 'npm:@mescius/spread-sheets-designer-vue/index.js',
'@mescius/spread-sheets-designer': 'npm:@mescius/spread-sheets-designer/index.js',
'@mescius/spread-sheets-barcode': 'npm:@mescius/spread-sheets-barcode/index.js',
'@mescius/spread-sheets-charts': 'npm:@mescius/spread-sheets-charts/index.js',
'@mescius/spread-sheets-languagepackages': 'npm:@mescius/spread-sheets-languagepackages/index.js',
'@mescius/spread-sheets-print': 'npm:@mescius/spread-sheets-print/index.js',
'@mescius/spread-sheets-pdf': 'npm:@mescius/spread-sheets-pdf/index.js',
'@mescius/spread-sheets-shapes': 'npm:@mescius/spread-sheets-shapes/index.js',
'@mescius/spread-sheets-io': 'npm:@mescius/spread-sheets-io/index.js',
'@mescius/spread-sheets-reportsheet-addon': 'npm:@mescius/spread-sheets-reportsheet-addon/index.js',
'@mescius/spread-sheets-tablesheet': 'npm:@mescius/spread-sheets-tablesheet/index.js',
'@mescius/spread-sheets-ganttsheet': 'npm:@mescius/spread-sheets-ganttsheet/index.js',
'@mescius/spread-sheets-formula-panel': 'npm:@mescius/spread-sheets-formula-panel/index.js',
'@mescius/spread-sheets-ai-addon': 'npm:@mescius/spread-sheets-ai-addon/index.js',
'@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js',
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
},
meta: {
'*.css': { loader: 'systemjs-plugin-css' },
'*.vue': { loader: "../plugin-vue/index.js" }
}
});
})(this);
