모델: {{ $config->model }}
+
인증: {{ $config->auth_type_label }}
+ @if($config->isVertexAi())
+
프로젝트: {{ $config->getProjectId() }} ({{ $config->getRegion() }})
+ @else
API 키: {{ $config->masked_api_key }}
+ @endif
@if($config->description)
설명: {{ $config->description }}
@endif
@@ -168,9 +173,42 @@
-
+
+
+
+
+
유료 플랜은 Vertex AI를 선택하세요
+
+
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Docker 컨테이너 내부 경로로 입력
+
@@ -179,7 +217,7 @@
기본값: gemini-2.0-flash
-
+
@@ -249,6 +287,37 @@ function showToast(message, type = 'info') {
openai: 'gpt-4o'
};
+ // 인증 방식에 따른 UI 전환
+ function toggleAuthTypeUI(provider, authType) {
+ const authTypeSection = document.getElementById('auth-type-section');
+ const apiKeySection = document.getElementById('api-key-section');
+ const vertexAiSection = document.getElementById('vertex-ai-section');
+ const baseUrlSection = document.getElementById('base-url-section');
+
+ // Gemini만 인증 방식 선택 가능
+ if (provider === 'gemini') {
+ authTypeSection.classList.remove('hidden');
+
+ if (authType === 'vertex_ai') {
+ apiKeySection.classList.add('hidden');
+ vertexAiSection.classList.remove('hidden');
+ baseUrlSection.classList.add('hidden');
+ document.getElementById('config-api-key').removeAttribute('required');
+ } else {
+ apiKeySection.classList.remove('hidden');
+ vertexAiSection.classList.add('hidden');
+ baseUrlSection.classList.remove('hidden');
+ document.getElementById('config-api-key').setAttribute('required', 'required');
+ }
+ } else {
+ authTypeSection.classList.add('hidden');
+ apiKeySection.classList.remove('hidden');
+ vertexAiSection.classList.add('hidden');
+ baseUrlSection.classList.remove('hidden');
+ document.getElementById('config-api-key').setAttribute('required', 'required');
+ }
+ }
+
// 모달 열기
window.openModal = function(config) {
const modal = document.getElementById('config-modal');
@@ -260,15 +329,27 @@ function showToast(message, type = 'info') {
document.getElementById('config-id').value = config.id;
document.getElementById('config-provider').value = config.provider;
document.getElementById('config-name').value = config.name;
- document.getElementById('config-api-key').value = config.api_key;
+ document.getElementById('config-api-key').value = config.api_key || '';
document.getElementById('config-model').value = config.model;
document.getElementById('config-base-url').value = config.base_url || '';
document.getElementById('config-description').value = config.description || '';
document.getElementById('config-is-active').checked = config.is_active;
+
+ // Vertex AI 옵션 로드
+ const options = config.options || {};
+ const authType = options.auth_type || 'api_key';
+ document.getElementById('config-auth-type').value = authType;
+ document.getElementById('config-project-id').value = options.project_id || '';
+ document.getElementById('config-region').value = options.region || 'us-central1';
+ document.getElementById('config-service-account-path').value = options.service_account_path || '';
+
+ toggleAuthTypeUI(config.provider, authType);
} else {
title.textContent = '새 설정 추가';
form.reset();
document.getElementById('config-id').value = '';
+ document.getElementById('config-auth-type').value = 'api_key';
+ toggleAuthTypeUI('gemini', 'api_key');
}
modal.classList.remove('hidden');
@@ -390,16 +471,45 @@ function showToast(message, type = 'info') {
e.preventDefault();
const id = document.getElementById('config-id').value;
+ const provider = document.getElementById('config-provider').value;
+ const authType = document.getElementById('config-auth-type').value;
+
const data = {
- provider: document.getElementById('config-provider').value,
+ provider: provider,
name: document.getElementById('config-name').value,
- api_key: document.getElementById('config-api-key').value,
model: document.getElementById('config-model').value,
- base_url: document.getElementById('config-base-url').value || null,
description: document.getElementById('config-description').value || null,
- is_active: document.getElementById('config-is-active').checked
+ is_active: document.getElementById('config-is-active').checked,
+ options: {}
};
+ // Gemini + Vertex AI인 경우
+ if (provider === 'gemini' && authType === 'vertex_ai') {
+ data.api_key = ''; // Vertex AI는 API 키 불필요
+ data.base_url = null;
+ data.options = {
+ auth_type: 'vertex_ai',
+ project_id: document.getElementById('config-project-id').value,
+ region: document.getElementById('config-region').value,
+ service_account_path: document.getElementById('config-service-account-path').value
+ };
+
+ // 필수 값 검증
+ if (!data.options.project_id || !data.options.service_account_path) {
+ showToast('프로젝트 ID와 서비스 계정 경로를 입력해주세요.', 'error');
+ return;
+ }
+ } else {
+ data.api_key = document.getElementById('config-api-key').value;
+ data.base_url = document.getElementById('config-base-url').value || null;
+ data.options = { auth_type: 'api_key' };
+
+ if (!data.api_key) {
+ showToast('API 키를 입력해주세요.', 'error');
+ return;
+ }
+ }
+
try {
const url = id
? `{{ url('system/ai-config') }}/${id}`
@@ -437,13 +547,28 @@ function showToast(message, type = 'info') {
modal.classList.add('hidden');
}
- // Provider 변경 시 기본 모델 업데이트
+ // Provider 변경 시 기본 모델 업데이트 및 UI 전환
const providerEl = document.getElementById('config-provider');
if (providerEl) {
providerEl.addEventListener('change', function() {
const provider = this.value;
document.getElementById('default-model').textContent = defaultModels[provider];
document.getElementById('config-model').placeholder = '예: ' + defaultModels[provider];
+
+ // Gemini가 아니면 API 키 모드로 강제
+ if (provider !== 'gemini') {
+ document.getElementById('config-auth-type').value = 'api_key';
+ }
+ toggleAuthTypeUI(provider, document.getElementById('config-auth-type').value);
+ });
+ }
+
+ // 인증 방식 변경 시 UI 전환
+ const authTypeEl = document.getElementById('config-auth-type');
+ if (authTypeEl) {
+ authTypeEl.addEventListener('change', function() {
+ const provider = document.getElementById('config-provider').value;
+ toggleAuthTypeUI(provider, this.value);
});
}