새 창에서 데모를 열어 디자이너 열기
이 예제는 다음 기능을 보여줍니다:
AI 기반 피벗 테이블 레이아웃 생성 지원： 사용자 데이터와 요구사항(예: 지역별 매출 집계 또는 카테고리별 평균 계산)에 따라 피벗 테이블 레이아웃을 자동으로 생성합니다.
피벗 테이블 분석: 피벗 테이블 결과에 대한 인사이트와 해석을 제공하여 사용자가 트렌드와 주요 데이터 포인트를 이해하는 데 도움을 줍니다.
이 기능을 사용하려면 다음 단계를 따라주세요:
스프레드시트 인터페이스에서 데이터셋을 업로드하거나 선택합니다.
텍스트 입력이나 드롭다운 옵션을 통해 분석 목표를 지정합니다(예: "월별 매출 집계").
'데이터 피벗 테이블 생성' 버튼(피벗 테이블 패널 우측 상단의 문자 "A")을 클릭하여 AI가 귀하의 데이터에 최적화된 레이아웃을 설계하도록 합니다.
생성된 피벗 테이블을 확인한 후 작업 공간에 적용합니다.
'데이터 피벗 테이블 분석' 버튼(피벗 테이블 패널 우측 상단의 문자 "I")을 클릭하여 결과에 대한 자세한 분석, 트렌드 및 주요 포인트를 확인합니다.
이 기능은 피벗 테이블 생성 및 분석 과정을 간소화하여, 다양한 수준의 사용자들이 데이터에서 실행 가능한 인사이트를 얻을 수 있도록 도와줍니다.
AI 생성 콘텐츠에 대한 면책 조항
1. 콘텐츠 생성 위험
본 서비스는 사용자가 주입한 제3자 AI 모델을 활용하여 출력을 생성합니다. 모델의 구조와 학습 데이터의 한계로 인해 결과물에는 부정확한 내용, 누락 또는 오해의 소지가 있을 수 있습니다. 저희는 프롬프트 엔지니어링과 기술적 제약을 통해 출력을 최적화하고 있지만, 모델 결함으로 인한 오류 위험을 완전히 제거할 수는 없습니다.
2. 사용자 검증 의무
본 서비스를 이용함으로써 귀하는 다음 사항에 동의하고 이를 준수할 것을 약속합니다：
모든 생성된 콘텐츠를 수동으로 검토할 것
검증되지 않은 출력을 법률, 의료, 금융 등 고위험 분야에서 사용하지 않을 것
생성된 콘텐츠에 의존하여 발생한 모든 직접적 또는 간접적 손실은 전적으로 사용자 책임임
3. 기술적 한계
우리는 다음과 같은 상황에 대해 책임지지 않습니다:
제3자 모델 결함 또는 논리적 오류로 인한 출력 실패
오류 복구 메커니즘에서 오류를 성공적으로 복구하지 못한 경우
현재 AI 기술의 본질적인 기술적 한계
4. 지식재산권 준수
귀하는 다음 사항을 보장해야 합니다:
주입된 모델/콘텐츠가 제3자의 권리를 침해하지 않을 것
본 서비스를 통해 불법 또는 민감한 자료를 처리하지 않을 것
모델 제공자의 지식재산권 관련 약관을 준수할 것
5. 약관 업데이트
우리는 다음과 같은 사유로 본 약관을 수정할 권리를 보유합니다:
기술 발전 (예: 새로운 AI 안전 프로토콜)
법규 변경 (예: AI 거버넌스 프레임워크 업데이트)
서비스 구조 개선
let spreadNS = GC.Spread.Sheets;
let config = GC.Spread.Sheets.Designer.DefaultConfig;
window.onload = function () {
const spread = createSpreadAndDesigner();
injectAI(spread);
};
function createSpreadAndDesigner() {
const demoHost = document.getElementById("demo-host");
if (window !== top) {
const spread = new GC.Spread.Sheets.Workbook(demoHost, { sheetCount: 2 });
const pt = initData(spread);
const panel = new GC.Spread.Pivot.PivotPanel('panel', pt, document.getElementById('panel'));
return spread;
} else {
const designer = new GC.Spread.Sheets.Designer.Designer(
demoHost,
undefined,
undefined,
{ sheetCount: 2 }
);
const spread = designer.getWorkbook();
const panel = document.getElementById('panel');
panel.style.display = 'none';
initData(spread);
spreadNS.Designer.getCommand('showFieldList').execute(designer);
return spread;
}
}
function initData(spread) {
// init Spread
spread.suspendPaint();
spread.setSheetCount(2);
let sheet = spread.getSheet(1);
sheet.name("DataSource");
sheet.setRowCount(117);
sheet.setColumnWidth(0, 120);
sheet.getCell(-1, 0).formatter("YYYY-mm-DD");
sheet.getRange(-1, 4, 0, 2).formatter("$ #,##0");
sheet.setArray(0, 0, pivotSales);
let table = sheet.tables.add('tableSales', 0, 0, 117, 6);
for (let i = 2; i <= 117; i++) {
sheet.setFormula(i - 1, 5, '=D' + i + '*E' + i)
}
table.style(GC.Spread.Sheets.Tables.TableThemes["none"]);
let sheet0 = spread.getSheet(0);
sheet0.name("PivotLayout");
// init PivotTable
let myPivotTable = sheet0.pivotTables.add("myPivotTable", "tableSales", 1, 1, GC.Spread.Pivot.PivotTableLayoutType.outline, GC.Spread.Pivot.PivotTableThemes.light8);
myPivotTable.suspendLayout();
myPivotTable.options.showRowHeader = true;
myPivotTable.options.showColumnHeader = true;
myPivotTable.add("salesperson", "Salesperson", GC.Spread.Pivot.PivotTableFieldType.rowField);
myPivotTable.add("car", "Cars", GC.Spread.Pivot.PivotTableFieldType.rowField);
let groupInfo = { originFieldName: "date", dateGroups: [{ by: GC.Pivot.DateGroupType.quarters }] };
myPivotTable.group(groupInfo);
myPivotTable.add("Quarters (date)", "Quarters (date)", GC.Spread.Pivot.PivotTableFieldType.columnField);
myPivotTable.add("total", "Totals", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum);
myPivotTable.resumeLayout();
myPivotTable.autoFitColumn();
sheet0.setActiveCell(2, 2);
spread.resumePaint();
return myPivotTable;
}
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);
}
function getAIApiUrl() {
return window.location.href.match(/http.+spreadjs\/learn-spreadjs\//)[0] + 'server/api/queryAI';
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="spreadjs culture" content="ko-kr" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css">
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-print/dist/gc.spread.sheets.print.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-barcode/dist/gc.spread.sheets.barcode.min.js"
type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-pdf/dist/gc.spread.sheets.pdf.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-pivot-addon/dist/gc.spread.pivot.pivottables.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-slicers/dist/gc.spread.sheets.slicers.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-formula-panel/dist/gc.spread.sheets.formulapanel.min.js"
type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-io/dist/gc.spread.sheets.io.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-ai-addon/dist/gc.spread.sheets.ai.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-resources-ko/dist/gc.spread.sheets.resources.ko.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-designer-resources-ko/dist/gc.spread.sheets.designer.resource.ko.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-designer/dist/gc.spread.sheets.designer.all.min.js"
type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/designer/license.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/data/pivot-data.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="demo-host"></div>
<div id="panel"></div>
</div>
</body>
</html>
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
display: flex;
flex-direction: row;
}
#demo-host {
width: calc(100% - 300px);
height: 100%;
flex-grow: 1;
}
#panel {
margin-left: 10px;
width: 300px;
display: flex;
flex-direction: column;
}
