AI 어시스턴트

SpreadJS AI 기능은 스프레드시트의 맥락 데이터와 파싱 기능을 제공하여 AI 상호작용을 강화하는 프레임워크를 제공합니다. 이를 통해 AI 모델이 보다 정확하고 스프레드시트에 특화된 응답을 생성할 수 있습니다.

설치 및 설정

AI 기능 추가

SpreadJS에서 AI 기능을 활성화하려면 프로젝트에 AI 스크립트를 포함해야 합니다.

헤더 참조 방식 구현:

<script src="gc.spread.sheets.ai.x.x.x.min.js"></script>

모듈 방식 구현

import '@mescius/spread-sheets-ai-addon';

맥락 기반 인텔리전스

SpreadJS는 워크시트 데이터를 지능적으로 추출하고 구성하여 AI 모델에 관련 맥락을 제공함으로써, 더 정밀한 결과를 생성합니다.

예시 시나리오:

맥락 없음: AI가 데이터 범위를 추측함 (=SUM(A1:A10))
맥락 있음: AI가 이름 정의된 범위를 참조함 (=SUM(table1[sales])

AI 모델 연동 방식

SpreadJS는 AI 모델과 연결하기 위한 유연한 방식을 제공합니다. 아래는 상세한 구현 방법입니다.

1. 보안 백엔드 프록시

API 키 노출을 허용하지 않는 경우, 요청을 서버로 전달하고 응답 데이터를 반환하는 방식을 선택할 수 있습니다.

가장 안전한 방식 – API 키를 서버 측에 유지

프론트엔드 구현:

const serverCallback = async (requestBody) => {
    requestBody.model = 'your model name';

    let response = await fetch('/api/queryAI', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(requestBody)
    });
    if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
    }

    return response;
}
workbook.injectAI(serverCallback);

백엔드 구현 (Node.js):

import express from "express";
import { OpenAI } from "openai";
import dotenv from "dotenv";
dotenv.config();
const app = express();
const port = process.env.PORT || 3000;
app.use(express.json());
app.use(express.static("public"));
const openai = new OpenAI({
    apiKey: process.env.AI_API_KEY,
    baseURL: process.env.AI_SERVER_URL,
});
app.post("/api/queryAI", async (req, res) => {
    try {
        const response = await openai.chat.completions.create(req.body);
        if (req.body.stream) {
            await handleStreamResponse(response, res);
        } else {
            handleNonStreamResponse(response, res);
        }
    } catch (error) {
        handleError(error, res, req.body.stream);
    }
});
async function handleStreamResponse(response, res) {
    res.setHeader("Content-Type", "text/event-stream");
    res.setHeader("Cache-Control", "no-cache");
    res.setHeader("Connection", "keep-alive");
    try {
        for await (const chunk of response) {
            res.write(`data: ${JSON.stringify(chunk)}\n\n`);
        }
        res.write("data: [DONE]\n\n");
        res.end();
    } catch (error) {
        res.write(`data: ${JSON.stringify({ error: error.message })}\n\n`);
        res.end();
    }
}
function handleNonStreamResponse(response, res) {
    console.log("Handling non-stream response...");
    res.setHeader("Content-Type", "application/json");
    res.setHeader("Cache-Control", "no-store");
    res.status(200).json(response);
}
function handleError(error, res, isStream) {
    console.error("Error:", error);
    if (isStream) {
        res.write(`data: ${JSON.stringify({ error: error.message })}\n\n`);
        res.end();
    } else {
        res.status(500).json({ error: error.message });
    }
}
app.listen(port, () => {
    console.log(`Server is running on port ${port}`);
});

2. 직접 API 구성

HTTP 요청 본문에 AI 구성을 노출해도 괜찮다면(API 키 공개는 권장되지 않음), 환경 변수로 구성을 주입할 수 있습니다.

// SpreadJS 워크북 초기화
const workbook = new GC.Spread.Sheets.Workbook('ss');

// AI 서비스 자격 증명 직접 구성
workbook.injectAI({
    model: 'gpt-4-turbo',  // 사용할 AI 모델 지정
    key: 'sk-your-api-key-here',  // API 키
    basePath: 'https://api.openai.com/v1',  // API 엔드포인트
});

3. 사용자 정의 클라이언트 측 핸들러

HTTP 요청 본문에 AI 구성을 노출해도 괜찮지만(API 키 공개는 권장되지 않음), 요청 본문에 민감한 데이터가 포함되어 있는지 확인하고 데이터 정제 등의 처리를 하고 싶은 경우 사용할 수 있습니다.

const httpCallback = async (requestBody) => {
    requestBody.model = 'your model name';
    // 데이터 정제 처리
    const response = await fetch('your base path', {
        method: 'POST',
        headers: {
            'Authorization': `Bearer ${'your api key'}`,
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(requestBody)
    });

    if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response;
};
var workbook = GC.Spread.Sheets.findControl('ss');
workbook.injectAI(httpCallback);

언어 현지화

SpreadJS는 워크북의 현재 언어 설정에 맞춰 AI 응답을 자동으로 요청합니다.

let culture = GC.Spread.Common.CultureManager.culture(); // ja-jp
let language = GC.Spread.Common.CultureManager.getCultureInfo(culture).displayName // 'Japanese (Japan)'

// 프롬프트 내 사용 예
// 'please return the answer by this language: ' + language;

보안 모범 사례

데이터 보호:
- 민감한 스프레드시트 데이터는 항상 정제 처리
- 콜백에서 필드 마스킹(삭제) 고려
자격 증명 보안:
- 클라이언트 측 코드에 API 키를 직접 노출하는 것은 권장되지 않음
- 운영 환경에서는 서버 프록시 사용
검증:
- AI가 생성한 모든 수식 및 콘텐츠 검증
- 출력 결과에 대한 정제 처리 구현

AI 기능은 SpreadJS 비즈니스 특화 기능 중 하나입니다. 라이선스 관련 세부 내용은 다음을 참고하세요: 체험판 및 라이선스 정보

AI 생성 콘텐츠 고지 사항

1. 콘텐츠 생성 위험
본 서비스는 사용자가 주입한 서드파티 AI 모델을 사용하여 결과를 생성합니다. 모델 아키텍처 및 학습 데이터의 고유한 한계로 인해, 결과에는 부정확성, 누락 또는 오해의 소지가 있는 내용이 포함될 수 있습니다. 당사는 프롬프트 엔지니어링 및 기술적 제약을 통해 결과를 최적화하고자 하나, 모델 자체의 근본적인 한계로 인한 모든 오류 가능성을 제거할 수는 없습니다.

2. 사용자 검증 의무
본 서비스를 사용하는 경우, 사용자는 다음에 동의하는 것으로 간주합니다.
생성된 모든 콘텐츠에 대해 수동 검증 수행
법률, 의료, 재무 등 고위험 시나리오에서 검증되지 않은 결과 사용 금지
생성된 콘텐츠에 의존함으로써 발생하는 직·간접적 손해에 대해 당사에 책임을 묻지 않음
3. 기술적 한계
당사는 다음 사항에 대해 책임을 지지 않습니다.
서드파티 모델 결함 또는 로직 오류로 인한 출력 실패
내결함성 절차를 통한 오류 복구 실패
현존 AI 기술의 고유한 기술적 제약
4. 지식재산권 준수
사용자는 다음을 보장해야 합니다.
주입된 모델 및 콘텐츠가 제3자의 권리를 침해하지 않을 것
불법적이거나 민감한 자료를 서비스에 처리하지 않을 것
모델 제공자의 지식재산권 계약을 준수할 것
5. 약관 변경
당사는 다음 사항에 맞추어 본 약관을 변경할 권리를 보유합니다.
기술 발전 (예: 새로운 AI 안전 프로토콜)
규제 변경 (예: 업데이트된 AI 거버넌스 프레임워크)
서비스 아키텍처 개선