init

2026-03-22 12:40:33 +03:00
commit 28a5d51389
61 changed files with 6085 additions and 0 deletions
--- a/frontend/.env.development
+++ b/frontend/.env.development
@@ -0,0 +1 @@
+VITE_API_BASE_URL=http://localhost:8091/api
--- a/frontend/.env.production
+++ b/frontend/.env.production
@@ -0,0 +1 @@
+VITE_API_BASE_URL=/api
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -0,0 +1,12 @@
+FROM node:20-alpine
+
+WORKDIR /app
+
+COPY package.json .
+RUN npm install
+
+COPY . .
+
+EXPOSE 5173
+
+CMD ["npm", "run", "dev"]
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="ru">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
+    <title>Filam3D — Калькулятор 3D-печати</title>
+  </head>
+  <body class="bg-gray-50 font-sans text-gray-900 antialiased">
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "filam3d-frontend",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0",
+    "pinia": "^2.3.0",
+    "axios": "^1.7.9"
+  },
+  "devDependencies": {
+    "vite": "^6.0.7",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "tailwindcss": "^3.4.17",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49"
+  }
+}
--- a/frontend/postcss.config.js
+++ b/frontend/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="min-h-screen bg-gray-50">
+    <header class="border-b border-gray-200 bg-white">
+      <div class="mx-auto flex max-w-6xl items-center justify-between px-4 py-4 sm:px-6">
+        <router-link to="/" class="flex items-center gap-2.5">
+          <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-primary-600">
+            <svg class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
+            </svg>
+          </div>
+          <span class="text-lg font-bold text-gray-900">Filam3D</span>
+        </router-link>
+        <nav class="flex items-center gap-1">
+          <router-link
+            to="/"
+            class="rounded-lg px-3 py-2 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
+            active-class="!bg-primary-50 !text-primary-700"
+          >
+            Калькулятор
+          </router-link>
+          <router-link
+            to="/materials"
+            class="rounded-lg px-3 py-2 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
+            active-class="!bg-primary-50 !text-primary-700"
+          >
+            Материалы
+          </router-link>
+        </nav>
+      </div>
+    </header>
+    <main class="mx-auto max-w-6xl px-4 py-8 sm:px-6">
+      <router-view />
+    </main>
+  </div>
+</template>
--- a/frontend/src/api/client.js
+++ b/frontend/src/api/client.js
@@ -0,0 +1,8 @@
+import axios from 'axios'
+
+const api = axios.create({
+  baseURL: import.meta.env.VITE_API_BASE_URL || '/api',
+  timeout: 60000,
+})
+
+export default api
--- a/frontend/src/assets/styles/main.css
+++ b/frontend/src/assets/styles/main.css
@@ -0,0 +1,27 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  body {
+    @apply min-h-screen;
+  }
+}
+
+@layer components {
+  .btn-primary {
+    @apply inline-flex items-center justify-center rounded-lg bg-primary-600 px-5 py-2.5 text-sm font-semibold text-white shadow-sm transition-all hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
+  }
+
+  .btn-secondary {
+    @apply inline-flex items-center justify-center rounded-lg border border-gray-300 bg-white px-5 py-2.5 text-sm font-semibold text-gray-700 shadow-sm transition-all hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;
+  }
+
+  .card {
+    @apply rounded-xl border border-gray-200 bg-white p-6 shadow-sm;
+  }
+
+  .input-field {
+    @apply block w-full rounded-lg border border-gray-300 px-3.5 py-2.5 text-sm shadow-sm transition-colors placeholder:text-gray-400 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500;
+  }
+}
--- a/frontend/src/components/AiAdvisor.vue
+++ b/frontend/src/components/AiAdvisor.vue
@@ -0,0 +1,132 @@
+<template>
+  <Teleport to="body">
+    <Transition name="fade">
+      <div v-if="open" class="fixed inset-0 z-50 flex items-start justify-end bg-black/30" @click.self="$emit('close')">
+        <div class="mt-0 h-full w-full max-w-md bg-white shadow-xl sm:mt-0 flex flex-col">
+          <div class="flex items-center justify-between border-b border-gray-200 px-5 py-4">
+            <h3 class="text-base font-semibold text-gray-900">AI-ассистент по материалам</h3>
+            <button @click="$emit('close')" class="rounded-md p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600">
+              <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          <div class="flex-1 overflow-y-auto p-5">
+            <p class="mb-4 text-sm text-gray-600">
+              Опишите вашу задачу, и AI порекомендует оптимальный материал.
+            </p>
+
+            <textarea
+              v-model="taskDescription"
+              rows="4"
+              class="input-field mb-4"
+              placeholder="Например: Корпус для уличного датчика температуры, диапазон -30..+50, водонепроницаемый"
+            ></textarea>
+
+            <button @click="getRecommendation" :disabled="!taskDescription.trim() || loading" class="btn-primary w-full mb-5">
+              <svg v-if="loading" class="mr-2 h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+              </svg>
+              {{ loading ? 'Анализирую...' : 'Получить рекомендацию' }}
+            </button>
+
+            <div v-if="error" class="mb-4 rounded-lg bg-red-50 p-3 text-sm text-red-700">{{ error }}</div>
+
+            <div v-if="recommendation">
+              <!-- Main recommendation -->
+              <div class="mb-4 rounded-lg border-2 border-primary-200 bg-primary-50 p-4">
+                <div class="flex items-center justify-between mb-2">
+                  <span class="text-xs font-semibold uppercase tracking-wider text-primary-600">Рекомендация</span>
+                  <button @click="selectMaterial(recommendation.recommended_material_id)" class="btn-primary !py-1 !px-3 !text-xs">
+                    Выбрать
+                  </button>
+                </div>
+                <p class="text-base font-bold text-gray-900 mb-1.5">{{ recommendation.recommended_material_name }}</p>
+                <p class="text-sm text-gray-700 leading-relaxed">{{ recommendation.reasoning }}</p>
+              </div>
+
+              <!-- Alternatives -->
+              <div v-if="recommendation.alternatives?.length" class="space-y-2.5">
+                <p class="text-xs font-semibold uppercase tracking-wider text-gray-500">Альтернативы</p>
+                <div v-for="alt in recommendation.alternatives" :key="alt.material_id" class="flex items-start justify-between rounded-lg border border-gray-200 p-3">
+                  <div class="flex-1">
+                    <p class="text-sm font-semibold text-gray-900">{{ alt.name }}</p>
+                    <p class="text-xs text-gray-500 mt-0.5">{{ alt.why }}</p>
+                  </div>
+                  <button @click="selectMaterial(alt.material_id)" class="btn-secondary !py-1 !px-2.5 !text-xs ml-3 shrink-0">
+                    Выбрать
+                  </button>
+                </div>
+              </div>
+
+              <!-- Questions -->
+              <div v-if="recommendation.questions?.length" class="mt-4 rounded-lg bg-amber-50 p-3">
+                <p class="text-xs font-semibold text-amber-700 mb-1.5">Уточняющие вопросы:</p>
+                <ul class="list-disc pl-4 text-sm text-amber-700 space-y-1">
+                  <li v-for="q in recommendation.questions" :key="q">{{ q }}</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import api from '../api/client'
+import { useCalculatorStore } from '../stores/calculator'
+
+defineProps({ open: Boolean })
+const emit = defineEmits(['close'])
+
+const store = useCalculatorStore()
+const taskDescription = ref('')
+const loading = ref(false)
+const error = ref('')
+const recommendation = ref(null)
+
+async function getRecommendation() {
+  loading.value = true
+  error.value = ''
+  try {
+    const payload = {
+      task_description: taskDescription.value,
+      budget_preference: 'optimal',
+    }
+    if (store.result?.file_info) {
+      payload.file_info = {
+        volume_cm3: store.result.file_info.volume_cm3,
+        bounding_box_mm: store.result.file_info.bounding_box_mm,
+      }
+    }
+    const { data } = await api.post('/advisor', payload)
+    recommendation.value = data
+  } catch (e) {
+    error.value = e.response?.data?.detail || 'Ошибка получения рекомендации'
+  } finally {
+    loading.value = false
+  }
+}
+
+function selectMaterial(id) {
+  store.materialId = id
+  store.result = null
+  emit('close')
+}
+</script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
--- a/frontend/src/components/FileUploader.vue
+++ b/frontend/src/components/FileUploader.vue
@@ -0,0 +1,125 @@
+<template>
+  <div class="card">
+    <h2 class="mb-4 text-lg font-semibold text-gray-900">1. Загрузите 3D-модель</h2>
+
+    <div
+      @dragover.prevent="isDragging = true"
+      @dragleave.prevent="isDragging = false"
+      @drop.prevent="onDrop"
+      :class="[
+        'relative flex flex-col items-center justify-center rounded-xl border-2 border-dashed px-6 py-10 transition-all',
+        isDragging ? 'border-primary-400 bg-primary-50' : 'border-gray-300 hover:border-gray-400',
+        selectedFile ? 'bg-green-50 border-green-300' : '',
+      ]"
+    >
+      <template v-if="!selectedFile">
+        <svg class="mb-3 h-10 w-10 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
+        </svg>
+        <p class="mb-1 text-sm font-medium text-gray-700">
+          Перетащите файл сюда или
+          <label class="cursor-pointer text-primary-600 hover:text-primary-700">
+            выберите
+            <input type="file" class="hidden" :accept="acceptTypes" @change="onFileSelect" />
+          </label>
+        </p>
+        <p class="text-xs text-gray-500">STL, 3MF, OBJ — до 50 МБ</p>
+      </template>
+
+      <template v-else>
+        <div class="flex items-center gap-3">
+          <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-green-100">
+            <svg class="h-5 w-5 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+          </div>
+          <div>
+            <p class="text-sm font-medium text-gray-900">{{ selectedFile.name }}</p>
+            <p class="text-xs text-gray-500">{{ formatSize(selectedFile.size) }} &middot; {{ getExtension(selectedFile.name) }}</p>
+          </div>
+          <button @click.stop="removeFile" class="ml-4 rounded-md p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600">
+            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+      </template>
+    </div>
+
+    <!-- Upload progress -->
+    <div v-if="store.loading && store.uploadProgress > 0" class="mt-3">
+      <div class="flex items-center justify-between text-xs text-gray-600 mb-1">
+        <span>Загрузка...</span>
+        <span>{{ store.uploadProgress }}%</span>
+      </div>
+      <div class="h-1.5 w-full rounded-full bg-gray-200">
+        <div class="h-1.5 rounded-full bg-primary-600 transition-all" :style="{ width: store.uploadProgress + '%' }"></div>
+      </div>
+    </div>
+
+    <p v-if="validationError" class="mt-2 text-sm text-red-600">{{ validationError }}</p>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { useCalculatorStore } from '../stores/calculator'
+
+const store = useCalculatorStore()
+const isDragging = ref(false)
+const validationError = ref('')
+
+const acceptTypes = '.stl,.3mf,.obj'
+const allowedExtensions = ['stl', '3mf', 'obj']
+const maxSize = 50 * 1024 * 1024
+
+const selectedFile = computed(() => store.file)
+
+function getExtension(name) {
+  return name.split('.').pop().toUpperCase()
+}
+
+function formatSize(bytes) {
+  if (bytes < 1024) return bytes + ' Б'
+  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' КБ'
+  return (bytes / (1024 * 1024)).toFixed(1) + ' МБ'
+}
+
+function validateFile(file) {
+  validationError.value = ''
+  const ext = file.name.split('.').pop().toLowerCase()
+  if (!allowedExtensions.includes(ext)) {
+    validationError.value = `Формат .${ext} не поддерживается. Используйте STL, 3MF или OBJ.`
+    return false
+  }
+  if (file.size > maxSize) {
+    validationError.value = 'Файл слишком большой (максимум 50 МБ)'
+    return false
+  }
+  return true
+}
+
+function setFile(file) {
+  if (validateFile(file)) {
+    store.file = file
+    store.result = null
+  }
+}
+
+function onFileSelect(e) {
+  const file = e.target.files[0]
+  if (file) setFile(file)
+}
+
+function onDrop(e) {
+  isDragging.value = false
+  const file = e.dataTransfer.files[0]
+  if (file) setFile(file)
+}
+
+function removeFile() {
+  store.file = null
+  store.result = null
+  validationError.value = ''
+}
+</script>
--- a/frontend/src/components/MaterialPicker.vue
+++ b/frontend/src/components/MaterialPicker.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="card">
+    <div class="mb-4 flex items-center justify-between">
+      <h2 class="text-lg font-semibold text-gray-900">2. Выберите материал</h2>
+      <button @click="$emit('openAdvisor')" class="btn-secondary !py-1.5 !px-3 !text-xs">
+        <svg class="mr-1.5 h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z" />
+        </svg>
+        Помочь выбрать
+      </button>
+    </div>
+
+    <div v-for="(label, cat) in categories" :key="cat" class="mb-5 last:mb-0">
+      <h3 class="mb-2.5 text-xs font-semibold uppercase tracking-wider text-gray-500">{{ label }}</h3>
+      <div class="grid grid-cols-1 gap-2.5 sm:grid-cols-2 lg:grid-cols-3">
+        <button
+          v-for="mat in materialsByCategory(cat)"
+          :key="mat.id"
+          @click="selectMaterial(mat.id)"
+          :class="[
+            'flex flex-col rounded-lg border-2 p-3.5 text-left transition-all',
+            store.materialId === mat.id
+              ? 'border-primary-500 bg-primary-50 ring-1 ring-primary-500'
+              : 'border-gray-200 hover:border-gray-300 hover:bg-gray-50',
+          ]"
+        >
+          <div class="flex items-center justify-between">
+            <span class="text-sm font-semibold text-gray-900">{{ mat.name }}</span>
+            <span class="text-xs font-medium text-gray-500">{{ mat.price_per_gram }} &#8381;/г</span>
+          </div>
+          <p class="mt-1 text-xs leading-relaxed text-gray-500">{{ mat.description }}</p>
+          <div class="mt-2 flex flex-wrap gap-1.5">
+            <span v-if="mat.properties.food_safe" class="inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-[10px] font-medium text-green-700">
+              Food safe
+            </span>
+            <span class="inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-[10px] font-medium text-gray-600">
+              {{ mat.properties.max_temp_c }}&deg;C
+            </span>
+            <span class="inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-[10px] font-medium text-gray-600">
+              {{ strengthLabel(mat.properties.strength) }}
+            </span>
+          </div>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue'
+import { useCalculatorStore } from '../stores/calculator'
+import { useMaterialsStore } from '../stores/materials'
+
+defineEmits(['openAdvisor'])
+
+const store = useCalculatorStore()
+const materialsStore = useMaterialsStore()
+const { categories } = materialsStore
+
+onMounted(() => materialsStore.fetchMaterials())
+
+function materialsByCategory(cat) {
+  return materialsStore.materials.filter((m) => m.category === cat)
+}
+
+function selectMaterial(id) {
+  store.materialId = id
+  store.result = null
+}
+
+const strengthLabels = {
+  low: 'Низкая',
+  medium: 'Средняя',
+  high: 'Высокая',
+  very_high: 'Очень высокая',
+  extreme: 'Экстремальная',
+}
+
+function strengthLabel(val) {
+  return strengthLabels[val] || val
+}
+</script>
--- a/frontend/src/components/OrderForm.vue
+++ b/frontend/src/components/OrderForm.vue
@@ -0,0 +1,77 @@
+<template>
+  <form @submit.prevent="submitOrder" class="space-y-4">
+    <div>
+      <label class="mb-1.5 block text-sm font-medium text-gray-700">Имя *</label>
+      <input v-model="form.client_name" required class="input-field" placeholder="Иван Петров" />
+    </div>
+    <div>
+      <label class="mb-1.5 block text-sm font-medium text-gray-700">Телефон *</label>
+      <input v-model="form.client_phone" required class="input-field" placeholder="+79001234567" />
+    </div>
+    <div>
+      <label class="mb-1.5 block text-sm font-medium text-gray-700">Email</label>
+      <input v-model="form.client_email" type="email" class="input-field" placeholder="ivan@example.com" />
+    </div>
+    <div>
+      <label class="mb-1.5 block text-sm font-medium text-gray-700">Компания</label>
+      <input v-model="form.client_company" class="input-field" placeholder="ООО Технопарк" />
+    </div>
+    <div>
+      <label class="mb-1.5 block text-sm font-medium text-gray-700">Способ получения</label>
+      <select v-model="form.delivery_method" class="input-field">
+        <option value="pickup">Самовывоз</option>
+        <option value="delivery">Доставка</option>
+      </select>
+    </div>
+    <div>
+      <label class="mb-1.5 block text-sm font-medium text-gray-700">Комментарий</label>
+      <textarea v-model="form.comment" rows="3" class="input-field" placeholder="Дополнительные пожелания"></textarea>
+    </div>
+
+    <p v-if="error" class="text-sm text-red-600">{{ error }}</p>
+
+    <button type="submit" :disabled="loading" class="btn-primary w-full">
+      <svg v-if="loading" class="mr-2 h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
+        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+      </svg>
+      {{ loading ? 'Оформляем...' : 'Оформить заказ' }}
+    </button>
+  </form>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue'
+import api from '../api/client'
+
+const props = defineProps({ calculationId: String })
+const emit = defineEmits(['success'])
+
+const form = reactive({
+  client_name: '',
+  client_phone: '',
+  client_email: '',
+  client_company: '',
+  delivery_method: 'pickup',
+  comment: '',
+})
+
+const loading = ref(false)
+const error = ref('')
+
+async function submitOrder() {
+  loading.value = true
+  error.value = ''
+  try {
+    const { data } = await api.post('/orders', {
+      calculation_id: props.calculationId,
+      ...form,
+    })
+    emit('success', data)
+  } catch (e) {
+    error.value = e.response?.data?.detail || 'Ошибка оформления заказа'
+  } finally {
+    loading.value = false
+  }
+}
+</script>
--- a/frontend/src/components/PriceResult.vue
+++ b/frontend/src/components/PriceResult.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="card" v-if="result">
+    <h2 class="mb-4 text-lg font-semibold text-gray-900">Результат расчёта</h2>
+
+    <!-- File info -->
+    <div class="mb-4 rounded-lg bg-gray-50 p-3.5">
+      <p class="text-xs font-semibold uppercase tracking-wider text-gray-500 mb-2">Модель</p>
+      <div class="grid grid-cols-2 gap-2 text-sm">
+        <div><span class="text-gray-500">Файл:</span> {{ result.file_info.filename }}</div>
+        <div><span class="text-gray-500">Объём:</span> {{ result.file_info.volume_cm3 }} см&sup3;</div>
+        <div><span class="text-gray-500">Габариты:</span> {{ bbox }}</div>
+        <div>
+          <span class="text-gray-500">Водонепр.:</span>
+          <span :class="result.file_info.is_watertight ? 'text-green-600' : 'text-amber-600'">
+            {{ result.file_info.is_watertight ? 'Да' : 'Нет' }}
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Price breakdown -->
+    <div class="space-y-2.5 mb-4">
+      <div class="flex justify-between text-sm">
+        <span class="text-gray-600">Материал ({{ result.calculation.material.name }}, {{ result.calculation.weight_grams }} г)</span>
+        <span class="font-medium">{{ fmt(result.calculation.material_cost_rub) }} &#8381;</span>
+      </div>
+      <div class="flex justify-between text-sm">
+        <span class="text-gray-600">Время печати (~{{ result.calculation.print_time_hours }} ч)</span>
+        <span class="font-medium">{{ fmt(result.calculation.time_cost_rub) }} &#8381;</span>
+      </div>
+      <div v-if="result.calculation.post_processing_cost_rub > 0" class="flex justify-between text-sm">
+        <span class="text-gray-600">Постобработка</span>
+        <span class="font-medium">{{ fmt(result.calculation.post_processing_cost_rub) }} &#8381;</span>
+      </div>
+      <div class="flex justify-between text-sm border-t border-gray-100 pt-2.5">
+        <span class="text-gray-600">Подитог (1 шт)</span>
+        <span class="font-medium">{{ fmt(result.calculation.subtotal_rub) }} &#8381;</span>
+      </div>
+      <div v-if="result.calculation.quantity > 1" class="flex justify-between text-sm">
+        <span class="text-gray-600">Количество: {{ result.calculation.quantity }} шт</span>
+        <span v-if="result.calculation.quantity_discount_percent" class="text-green-600 font-medium">
+          -{{ result.calculation.quantity_discount_percent }}% скидка
+        </span>
+      </div>
+    </div>
+
+    <!-- Total -->
+    <div class="rounded-lg bg-primary-50 p-4 mb-4">
+      <div class="flex items-center justify-between">
+        <div>
+          <p class="text-sm font-medium text-primary-700">Итого</p>
+          <p class="text-xs text-primary-600">Срок: ~{{ result.calculation.estimated_days }} рабочих дней</p>
+        </div>
+        <p class="text-2xl font-bold text-primary-700">{{ fmt(result.calculation.total_rub) }} &#8381;</p>
+      </div>
+    </div>
+
+    <router-link :to="`/order/${result.calculation_id}`" class="btn-primary w-full text-center block">
+      Оформить заказ
+    </router-link>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useCalculatorStore } from '../stores/calculator'
+
+const store = useCalculatorStore()
+const result = computed(() => store.result)
+
+const bbox = computed(() => {
+  if (!result.value) return ''
+  const b = result.value.file_info.bounding_box_mm
+  return `${b.x} x ${b.y} x ${b.z} мм`
+})
+
+function fmt(n) {
+  return new Intl.NumberFormat('ru-RU', { maximumFractionDigits: 0 }).format(n)
+}
+</script>
--- a/frontend/src/components/PrintSettings.vue
+++ b/frontend/src/components/PrintSettings.vue
@@ -0,0 +1,100 @@
+<template>
+  <div class="card">
+    <h2 class="mb-4 text-lg font-semibold text-gray-900">3. Параметры печати</h2>
+
+    <div class="space-y-5">
+      <!-- Infill -->
+      <div>
+        <div class="flex items-center justify-between mb-2">
+          <label class="text-sm font-medium text-gray-700" title="Больше заполнение — прочнее, но тяжелее и дороже">
+            Заполнение
+          </label>
+          <span class="text-sm font-semibold text-primary-600">{{ store.settings.infill_percent }}%</span>
+        </div>
+        <input
+          type="range"
+          :value="store.settings.infill_percent"
+          @input="store.settings.infill_percent = +$event.target.value"
+          min="10" max="100" step="10"
+          class="w-full accent-primary-600"
+        />
+        <div class="mt-1 flex justify-between text-[10px] text-gray-400">
+          <span>10%</span><span>50%</span><span>100%</span>
+        </div>
+      </div>
+
+      <!-- Layer height -->
+      <div>
+        <div class="flex items-center justify-between mb-2">
+          <label class="text-sm font-medium text-gray-700" title="Меньше слой — лучше качество, но дольше печать">
+            Высота слоя
+          </label>
+          <span class="text-sm font-semibold text-primary-600">{{ store.settings.layer_height_mm }} мм</span>
+        </div>
+        <input
+          type="range"
+          :value="store.settings.layer_height_mm"
+          @input="store.settings.layer_height_mm = +parseFloat($event.target.value).toFixed(2)"
+          min="0.08" max="0.4" step="0.04"
+          class="w-full accent-primary-600"
+        />
+        <div class="mt-1 flex justify-between text-[10px] text-gray-400">
+          <span>0.08</span><span>0.2</span><span>0.4</span>
+        </div>
+      </div>
+
+      <!-- Quantity -->
+      <div>
+        <label class="mb-2 block text-sm font-medium text-gray-700">Количество</label>
+        <input
+          type="number"
+          :value="store.settings.quantity"
+          @input="store.settings.quantity = Math.max(1, Math.min(500, +$event.target.value || 1))"
+          min="1" max="500"
+          class="input-field w-28"
+        />
+      </div>
+
+      <!-- Post-processing -->
+      <div>
+        <label class="mb-2.5 block text-sm font-medium text-gray-700">Постобработка</label>
+        <div class="space-y-2">
+          <label v-for="pp in postProcessingOptions" :key="pp.value" class="flex items-center gap-2.5 cursor-pointer">
+            <input
+              type="checkbox"
+              :value="pp.value"
+              :checked="store.settings.post_processing.includes(pp.value)"
+              @change="togglePP(pp.value)"
+              class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500"
+            />
+            <span class="text-sm text-gray-700">{{ pp.label }}</span>
+            <span class="text-xs text-gray-400">{{ pp.price }}</span>
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useCalculatorStore } from '../stores/calculator'
+
+const store = useCalculatorStore()
+
+const postProcessingOptions = [
+  { value: 'sanding', label: 'Шлифовка', price: '300 ₽/шт' },
+  { value: 'painting', label: 'Покраска', price: '500 ₽/шт' },
+  { value: 'threading', label: 'Нарезка резьбы', price: '200 ₽/шт' },
+  { value: 'acetone_smoothing', label: 'Ацетоновая обработка (ABS)', price: '400 ₽/шт' },
+]
+
+function togglePP(value) {
+  const idx = store.settings.post_processing.indexOf(value)
+  if (idx > -1) {
+    store.settings.post_processing.splice(idx, 1)
+  } else {
+    store.settings.post_processing.push(value)
+  }
+  store.result = null
+}
+</script>
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -0,0 +1,10 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import App from './App.vue'
+import router from './router'
+import './assets/styles/main.css'
+
+const app = createApp(App)
+app.use(createPinia())
+app.use(router)
+app.mount('#app')
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -0,0 +1,15 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import CalculatorView from '../views/CalculatorView.vue'
+import MaterialsView from '../views/MaterialsView.vue'
+import OrderView from '../views/OrderView.vue'
+
+const routes = [
+  { path: '/', name: 'calculator', component: CalculatorView },
+  { path: '/materials', name: 'materials', component: MaterialsView },
+  { path: '/order/:calcId', name: 'order', component: OrderView },
+]
+
+export default createRouter({
+  history: createWebHistory(),
+  routes,
+})
--- a/frontend/src/stores/calculator.js
+++ b/frontend/src/stores/calculator.js
@@ -0,0 +1,63 @@
+import { defineStore } from 'pinia'
+import { ref, reactive } from 'vue'
+import api from '../api/client'
+
+export const useCalculatorStore = defineStore('calculator', () => {
+  const file = ref(null)
+  const materialId = ref(null)
+  const settings = reactive({
+    infill_percent: 30,
+    layer_height_mm: 0.2,
+    quantity: 1,
+    post_processing: [],
+  })
+  const result = ref(null)
+  const loading = ref(false)
+  const error = ref(null)
+  const uploadProgress = ref(0)
+
+  async function calculate() {
+    if (!file.value || !materialId.value) return
+
+    loading.value = true
+    error.value = null
+    uploadProgress.value = 0
+
+    const formData = new FormData()
+    formData.append('file', file.value)
+    formData.append('material_id', materialId.value)
+    formData.append('infill_percent', settings.infill_percent)
+    formData.append('layer_height_mm', settings.layer_height_mm)
+    formData.append('quantity', settings.quantity)
+    formData.append('post_processing', settings.post_processing.join(','))
+
+    try {
+      const { data } = await api.post('/calculate', formData, {
+        headers: { 'Content-Type': 'multipart/form-data' },
+        onUploadProgress: (e) => {
+          uploadProgress.value = Math.round((e.loaded / e.total) * 100)
+        },
+      })
+      result.value = data
+    } catch (e) {
+      error.value = e.response?.data?.detail || 'Ошибка расчёта'
+      result.value = null
+    } finally {
+      loading.value = false
+    }
+  }
+
+  function reset() {
+    file.value = null
+    materialId.value = null
+    settings.infill_percent = 30
+    settings.layer_height_mm = 0.2
+    settings.quantity = 1
+    settings.post_processing = []
+    result.value = null
+    error.value = null
+    uploadProgress.value = 0
+  }
+
+  return { file, materialId, settings, result, loading, error, uploadProgress, calculate, reset }
+})
--- a/frontend/src/stores/materials.js
+++ b/frontend/src/stores/materials.js
@@ -0,0 +1,31 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import api from '../api/client'
+
+export const useMaterialsStore = defineStore('materials', () => {
+  const materials = ref([])
+  const loading = ref(false)
+
+  async function fetchMaterials() {
+    if (materials.value.length > 0) return
+    loading.value = true
+    try {
+      const { data } = await api.get('/materials')
+      materials.value = data
+    } finally {
+      loading.value = false
+    }
+  }
+
+  function getMaterialById(id) {
+    return materials.value.find((m) => m.id === id)
+  }
+
+  const categories = {
+    basic: 'Базовые',
+    engineering: 'Инженерные',
+    composite: 'Композитные',
+  }
+
+  return { materials, loading, fetchMaterials, getMaterialById, categories }
+})
--- a/frontend/src/views/CalculatorView.vue
+++ b/frontend/src/views/CalculatorView.vue
@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <div class="mb-6">
+      <h1 class="text-2xl font-bold text-gray-900">Калькулятор 3D-печати</h1>
+      <p class="mt-1 text-sm text-gray-500">Загрузите модель, выберите материал и получите мгновенный расчёт стоимости</p>
+    </div>
+
+    <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
+      <div class="lg:col-span-2 space-y-6">
+        <FileUploader />
+        <MaterialPicker @open-advisor="showAdvisor = true" />
+        <PrintSettings />
+
+        <div>
+          <button
+            @click="store.calculate()"
+            :disabled="!store.file || !store.materialId || store.loading"
+            class="btn-primary w-full sm:w-auto"
+          >
+            <svg v-if="store.loading" class="mr-2 h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+            </svg>
+            {{ store.loading ? 'Считаем...' : 'Рассчитать стоимость' }}
+          </button>
+          <p v-if="store.error" class="mt-2 text-sm text-red-600">{{ store.error }}</p>
+        </div>
+      </div>
+
+      <div class="lg:col-span-1">
+        <div class="sticky top-8">
+          <PriceResult />
+          <div v-if="!store.result" class="card text-center text-sm text-gray-400">
+            <svg class="mx-auto mb-3 h-12 w-12 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 15.75V18m-7.5-6.75h.008v.008H8.25v-.008zm0 2.25h.008v.008H8.25v-.008zm0 2.25h.008v.008H8.25v-.008zm0 2.25h.008v.008H8.25v-.008zm2.25-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H12.75v-.008zm0 2.25h.008v.008H12.75v-.008zm0 2.25h.008v.008H12.75v-.008zm0 2.25h.008v.008H12.75v-.008zm2.25-4.5h.008v.008H15v-.008zm0 2.25h.008v.008H15v-.008zm0 2.25h.008v.008H15v-.008z" />
+            </svg>
+            <p>Загрузите модель и выберите материал для расчёта</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <AiAdvisor :open="showAdvisor" @close="showAdvisor = false" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useCalculatorStore } from '../stores/calculator'
+import FileUploader from '../components/FileUploader.vue'
+import MaterialPicker from '../components/MaterialPicker.vue'
+import PrintSettings from '../components/PrintSettings.vue'
+import PriceResult from '../components/PriceResult.vue'
+import AiAdvisor from '../components/AiAdvisor.vue'
+
+const store = useCalculatorStore()
+const showAdvisor = ref(false)
+</script>
--- a/frontend/src/views/MaterialsView.vue
+++ b/frontend/src/views/MaterialsView.vue
@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <div class="mb-6">
+      <h1 class="text-2xl font-bold text-gray-900">Каталог материалов</h1>
+      <p class="mt-1 text-sm text-gray-500">Все доступные материалы для 3D-печати</p>
+    </div>
+
+    <div v-if="materialsStore.loading" class="text-center py-12 text-gray-500">Загрузка...</div>
+
+    <div v-else v-for="(label, cat) in materialsStore.categories" :key="cat" class="mb-8">
+      <h2 class="mb-4 text-lg font-semibold text-gray-900">{{ label }}</h2>
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        <div v-for="mat in byCategory(cat)" :key="mat.id" class="card">
+          <div class="flex items-center justify-between mb-3">
+            <h3 class="text-base font-bold text-gray-900">{{ mat.name }}</h3>
+            <span class="rounded-full bg-primary-100 px-2.5 py-0.5 text-xs font-semibold text-primary-700">
+              {{ mat.price_per_gram }} &#8381;/г
+            </span>
+          </div>
+          <p class="text-sm text-gray-600 mb-3">{{ mat.description }}</p>
+
+          <div class="grid grid-cols-2 gap-2 text-xs">
+            <div class="rounded bg-gray-50 p-2">
+              <span class="text-gray-500">Темп.</span>
+              <span class="ml-1 font-medium">{{ mat.properties.min_temp_c }}..{{ mat.properties.max_temp_c }}&deg;C</span>
+            </div>
+            <div class="rounded bg-gray-50 p-2">
+              <span class="text-gray-500">Прочность</span>
+              <span class="ml-1 font-medium">{{ mat.properties.strength }}</span>
+            </div>
+            <div class="rounded bg-gray-50 p-2">
+              <span class="text-gray-500">Гибкость</span>
+              <span class="ml-1 font-medium">{{ mat.properties.flexibility }}</span>
+            </div>
+            <div class="rounded bg-gray-50 p-2">
+              <span class="text-gray-500">Хим. стойк.</span>
+              <span class="ml-1 font-medium">{{ mat.properties.chemical_resistance }}</span>
+            </div>
+          </div>
+
+          <div v-if="mat.color_options?.length" class="mt-3 flex flex-wrap gap-1.5">
+            <span v-for="c in mat.color_options" :key="c" class="rounded-full bg-gray-100 px-2 py-0.5 text-[10px] text-gray-600">
+              {{ c }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue'
+import { useMaterialsStore } from '../stores/materials'
+
+const materialsStore = useMaterialsStore()
+onMounted(() => materialsStore.fetchMaterials())
+
+function byCategory(cat) {
+  return materialsStore.materials.filter((m) => m.category === cat)
+}
+</script>
--- a/frontend/src/views/OrderView.vue
+++ b/frontend/src/views/OrderView.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="mx-auto max-w-lg">
+    <div class="mb-6">
+      <router-link to="/" class="mb-4 inline-flex items-center text-sm text-gray-500 hover:text-gray-700">
+        <svg class="mr-1 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+        </svg>
+        Назад к калькулятору
+      </router-link>
+      <h1 class="text-2xl font-bold text-gray-900">Оформление заказа</h1>
+    </div>
+
+    <div v-if="!orderResult" class="card">
+      <OrderForm :calculation-id="calcId" @success="onOrderSuccess" />
+    </div>
+
+    <div v-else class="card text-center">
+      <div class="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-green-100">
+        <svg class="h-7 w-7 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+        </svg>
+      </div>
+      <h2 class="text-xl font-bold text-gray-900 mb-2">Заказ оформлен!</h2>
+      <p class="text-sm text-gray-600 mb-1">Номер заказа: <span class="font-semibold">{{ orderResult.order_id }}</span></p>
+      <p class="text-sm text-gray-600 mb-1">Сумма: <span class="font-semibold">{{ orderResult.total_rub }} &#8381;</span></p>
+      <p class="text-sm text-gray-600 mb-4">Готовность: <span class="font-semibold">{{ orderResult.estimated_ready_date }}</span></p>
+      <p class="text-xs text-gray-400 mb-4">Мы свяжемся с вами для подтверждения заказа</p>
+      <router-link to="/" class="btn-primary">Новый расчёт</router-link>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRoute } from 'vue-router'
+import OrderForm from '../components/OrderForm.vue'
+
+const route = useRoute()
+const calcId = route.params.calcId
+const orderResult = ref(null)
+
+function onOrderSuccess(data) {
+  orderResult.value = data
+}
+</script>
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -0,0 +1,26 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{vue,js,ts}'],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '#eff6ff',
+          100: '#dbeafe',
+          200: '#bfdbfe',
+          300: '#93c5fd',
+          400: '#60a5fa',
+          500: '#3b82f6',
+          600: '#2563eb',
+          700: '#1d4ed8',
+          800: '#1e40af',
+          900: '#1e3a8a',
+        },
+      },
+      fontFamily: {
+        sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
+      },
+    },
+  },
+  plugins: [],
+}
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+  server: {
+    host: '0.0.0.0',
+    port: 5173,
+  },
+})
				`@@ -0,0 +1 @@`
				`VITE_API_BASE_URL=http://localhost:8091/api`