@gendive/slide 0.1.12 → 0.1.14

package/README.md

@@ -1,6 +1,6 @@
 # DevDive Slide
 
-React 기반 프레젠테이션 에디터 라이브러리. Canva 스타일의 이미지 크롭, PPTX 내보내기를 지원합니다.
+React 기반 프레젠테이션 에디터 라이브러리. Canva 스타일의 이미지 크롭, PPTX 내보내기, AI 슬라이드 생성을 지원합니다.
 
 ## 주요 기능
 
@@ -9,22 +9,115 @@ React 기반 프레젠테이션 에디터 라이브러리. Canva 스타일의
 - **이미지** - 드래그 앤 드롭, Canva 스타일 크롭, 확대/축소
 - **템플릿** - 다양한 레이아웃 및 테마 프리셋
 - **PPTX 내보내기** - 모든 요소를 PowerPoint로 변환
+- **AI 슬라이드 생성** - DevDive AI로 슬라이드 자동 생성 및 편집
+- **AI 이미지 생성** - 텍스트 프롬프트 기반 이미지 생성
 
 ## 설치
 
 ```bash
-pnpm install
+pnpm add @gendive/slide
 ```
 
-## 개발 서버
+## 사용법
 
-```bash
-pnpm dev
+### 기본 사용
+
+```tsx
+import { MantineProvider } from '@mantine/core';
+import '@mantine/core/styles.css';
+import { Editor, devdiveTheme } from '@gendive/slide';
+import '@gendive/slide/style.css';
+
+function App() {
+  return (
+    <MantineProvider theme={devdiveTheme}>
+      <Editor
+        aiConfig={{
+          provider: 'devdive',
+          apiKey: 'YOUR_API_KEY',
+          model: 'gpt-4o',
+        }}
+      />
+    </MantineProvider>
+  );
+}
+```
+
+### 라이트 모드
+
+```tsx
+import { MantineProvider } from '@mantine/core';
+import '@mantine/core/styles.css';
+import { Editor, devdiveThemeLight } from '@gendive/slide';
+import '@gendive/slide/style.css';
+
+function App() {
+  return (
+    <MantineProvider theme={devdiveThemeLight} forceColorScheme="light">
+      <Editor
+        aiConfig={{
+          provider: 'devdive',
+          apiKey: 'YOUR_API_KEY',
+          model: 'gpt-4o',
+        }}
+      />
+    </MantineProvider>
+  );
+}
+```
+
+### 커스텀 API 엔드포인트 (내부 프록시)
+
+```tsx
+<Editor
+  aiConfig={{
+    provider: 'devdive',
+    apiKey: '',
+    baseUrl: '/api/model/text-generation/v1',
+    model: 'gpt-4o',
+    skipAuth: true,
+  }}
+/>
+```
+
+### Editor 외부에서 AI 설정
+
+```tsx
+import { initAiConfig } from '@gendive/slide';
+
+initAiConfig({
+  provider: 'devdive',
+  apiKey: 'YOUR_API_KEY',
+  baseUrl: '/api/model/text-generation/v1',
+  model: 'gpt-4o',
+});
 ```
 
-## 라이브러리 빌드
+## Peer Dependencies
+
+호스트 앱에서 다음 패키지를 제공해야 합니다:
+
+```json
+{
+  "react": "^18 || ^19",
+  "react-dom": "^18 || ^19",
+  "@mantine/core": "^7",
+  "@mantine/hooks": "^7"
+}
+```
+
+> **참고**: `@mantine/core/styles.css`는 호스트 앱에서 직접 import해야 합니다. 패키지 번들에는 Mantine CSS가 포함되지 않습니다.
+
+## 개발
 
 ```bash
+# 의존성 설치
+pnpm install
+
+# 개발 서버
+pnpm dev
+
+# 라이브러리 빌드
 pnpm build:lib
 ```
 
@@ -32,21 +125,10 @@ pnpm build:lib
 
 - **React 19** + **TypeScript 5.6**
 - **Vite** - 빌드 도구
+- **Mantine 7** - UI 컴포넌트
 - **Zustand** - 상태 관리
 - **Konva** / **react-konva** - 캔버스 렌더링
 - **PptxGenJS** - PPTX 생성
-- **Tailwind CSS 4** - 스타일링
-
-## 사용법
-
-```tsx
-import { Editor, useEditorStore } from '@devdive/slide';
-import '@devdive/slide/style.css';
-
-function App() {
-  return <Editor />;
-}
-```
 
 ## 라이선스
 

package/dist/ai/hooks/useAiGeneration.d.ts

@@ -20,7 +20,7 @@ export declare const useAiGeneration: () => {
     generateText: (request: AiTextRequest) => Promise<import('..').AiTextResponse>;
     generateSlides: (request: AiSlideGenerationRequest) => Promise<import('..').AiSlideGenerationResponse>;
     generateSlideContent: (request: SlideContentRequest) => Promise<AiGeneratedSlide>;
-    generateImage: (_request: AiImageRequest) => Promise<AiImageResponse>;
+    generateImage: (request: AiImageRequest) => Promise<AiImageResponse>;
     suggestDesign: (_request: AiDesignRequest) => Promise<AiDesignSuggestion[]>;
     reset: () => void;
 };

package/dist/ai/services/providers/devdiveProvider.d.ts

@@ -1,4 +1,4 @@
-import { AiTextRequest, AiTextResponse, AiSlideGenerationRequest, AiSlideGenerationResponse, AiGeneratedSlide, DevDiveConfig } from '../../types';
+import { AiTextRequest, AiTextResponse, AiSlideGenerationRequest, AiSlideGenerationResponse, AiGeneratedSlide, AiImageRequest, AiImageResponse, DevDiveConfig } from '../../types';
 /**
  * @description DevDive API 에러
  */
@@ -52,6 +52,11 @@ export interface SlideContentRequest {
  * @Todo vibecode - IR 스타일 프롬프트로 슬라이드별 콘텐츠 생성
  */
 export declare const generateSlideContentWithDevDive: (request: SlideContentRequest, config: DevDiveConfig) => Promise<AiGeneratedSlide>;
+/**
+ * @description DevDive 이미지 생성 (텍스트 → 이미지)
+ * @Todo vibecode - /api/model/image-generation/v2/gemini-3-pro-image-txt-to-img
+ */
+export declare const generateImageWithDevDive: (request: AiImageRequest, config: DevDiveConfig) => Promise<AiImageResponse>;
 /**
  * @description DevDive Provider
  */
@@ -59,4 +64,5 @@ export declare const devdiveProvider: {
     generateText: (request: AiTextRequest, config: DevDiveConfig) => Promise<AiTextResponse>;
     generateSlides: (request: AiSlideGenerationRequest, config: DevDiveConfig) => Promise<AiSlideGenerationResponse>;
     generateSlideContent: (request: SlideContentRequest, config: DevDiveConfig) => Promise<AiGeneratedSlide>;
+    generateImage: (request: AiImageRequest, config: DevDiveConfig) => Promise<AiImageResponse>;
 };

package/dist/ai/types/index.d.ts

@@ -164,6 +164,22 @@ export interface AiDesignSuggestion {
     preview?: ThemeColors;
     layoutId?: LayoutType;
 }
+/**
+ * @description DevDive 이미지 생성 요청 (텍스트 → 이미지)
+ * @Todo vibecode - POST /api/model/image-generation/v2/gemini-3-pro-image-txt-to-img
+ */
+export interface DevDiveImageGenerationRequest {
+    prompt: string;
+}
+/**
+ * @description DevDive 이미지 생성 응답
+ * @Todo vibecode - base64 이미지 데이터 반환
+ */
+export interface DevDiveImageGenerationResponse {
+    base64_image_data: string;
+    cost: number;
+    output_text: string;
+}
 /**
  * @description AI 스토어 상태
  */